如何在React Native for Android中的启动画面后删除白色屏幕

Question

我有一个Default react本机项目,我安装了From This Turorial,我刚刚使用本教程将Splash Screen添加到我的项目中,但我得到了第一个:

• 0.5下降闪屏照片
• 然后1.5分白屏
• 然后,我的应用程序启动,

解决此问题的最佳和最常用的方法是什么？ 我需要只有1个标准预加载启动屏幕和该应用程序启动之后,我阅读更多文章,但我不能通过本机反应修复.

<application
  android:name=".MainApplication"
  android:allowBackup="true"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:theme="@style/AppTheme">
  <activity
    android:name=".SplashActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize"
    android:theme="@style/SplashTheme">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name=".MainActivity" />
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

Answer 1

我也遇到过这个问题。在我的例子中，它是 redux 持久库，它用于从存储中提取持久状态并将其提供给减速器，并且该过程在该过程中花费了将近 1 秒的时间，它用于显示白屏有点闪烁，然后呈现实际屏幕.

我使用的解决方法实际上是隐藏飞溅的控件在 javascript 端，您这样做是为了隐藏它。

componentDidMount() {
    SplashScreen.hide();
}

只需添加一点延迟，它就会正常工作。

componentDidMount() {
    setTimeout(() => SplashScreen.hide() , 2000);
}

Answer 2

我按照@sergiulucaci 在 GitHub 上提到的步骤来解决这个问题，并且它有效

转到android/app/src/main/res/values/styles.xml

禁用应用程序的预览如下：

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowDisablePreview">true</item> // <--- ADD THIS
        // Other items...
    </style>
</resources>

Answer 3

这是我在 RN v.063 上针对 IOS - 2021 的解决方案

来自 React Native 文档 https://reactnative.dev/docs/publishing-to-app-store#pro-tips

1. 搜索并找到您的AppDelegate.m文件
2. 添加此代码
3. 重新构建应用程序（因此停止应用程序并重新启动它）

// Place this code after "[self.window makeKeyAndVisible]" and before "return YES;"
  UIStoryboard *sb = [UIStoryboard storyboardWithName:@"LaunchScreen" bundle:nil];
  UIViewController *vc = [sb instantiateInitialViewController];
  rootView.loadingView = vc.view;

这是 React Native 文档消息

随着您的 App Bundle 越来越大，您可能会开始在启动画面和根应用程序视图的显示之间看到一个空白屏幕闪烁。如果是这种情况，您可以添加以下代码以AppDelegate.m在转换期间保持启动画面显示。

Answer 4

第一的：
\n运行npm i react-native-splash-screen --save

\n\n

第二步（插件安装）：
\n自动安装

\n\n

react-native link react-native-splash-screen or rnpm link react-native-splash-screen\n

\n\n

手动安装
\n Android：
\n1：在您的android/settings.gradle文件中，进行以下添加：

\n\n

include ':react-native-splash-screen'   \nproject(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')\n

\n\n

2: 在你的 android/app/build.gradle 文件中，添加:react-native-splash-screen项目添加为编译时依赖项：

\n\n

...\ndependencies {\n    ...\n    compile project(':react-native-splash-screen')\n}\n

\n\n

3：更新MainApplication.java文件以使用react-native-splash-screen3：通过以下更改更新

\n\n

// react-native-splash-screen >= 0.3.1\nimport org.devio.rn.splashscreen.SplashScreenReactPackage;\n// react-native-splash-screen < 0.3.1\nimport com.cboy.rn.splashscreen.SplashScreenReactPackage;\n\npublic class MainApplication extends Application implements ReactApplication {\n\n    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {\n        @Override\n        protected boolean getUseDeveloperSupport() {\n            return BuildConfig.DEBUG;\n        }\n\n        @Override\n        protected List<ReactPackage> getPackages() {\n            return Arrays.<ReactPackage>asList(\n                    new MainReactPackage(),\n            new SplashScreenReactPackage()  //here\n            );\n        }\n    };\n\n    @Override\n    public ReactNativeHost getReactNativeHost() {\n        return mReactNativeHost;\n    }\n}\n

\n\n

示例代码：

\n\n

import React, {Component} from 'react';\nimport {\n    StyleSheet,\n    View,\n    Text,\n    TouchableOpacity,\n    Linking,\n} from 'react-native'\nimport SplashScreen from 'react-native-splash-screen'\n\nexport default class example extends Component {\n\n    componentDidMount() {\n        SplashScreen.hide();\n    }\n\n\n    render() {\n        return (\n            <TouchableOpacity\n                style={styles.container}\n                onPress={(e)=> {\n                    Linking.openURL('http://www.devio.org/');\n                }}\n            >\n                <View >\n                    <Text style={styles.item}>\n                        SplashScreen \xe5\x90\xaf\xe5\x8a\xa8\xe5\xb1\x8f\n                    </Text>\n                    <Text style={styles.item}>\n                        @\xef\xbc\x9ahttp://www.devio.org/\n                    </Text>\n                    <Text style={styles.item}>\n                        GitHub:https://github.com/crazycodeboy\n                    </Text>\n                    <Text style={styles.item}>\n                        Email:crazycodeboy@gmail.com\n                    </Text>\n                </View>\n            </TouchableOpacity>\n        )\n    }\n\n}\n\nconst styles = StyleSheet.create({\n    container: {\n        flex: 1,\n        backgroundColor: '#f3f2f2',\n        marginTop: 30\n    },\n    item: {\n        fontSize: 20,\n    },\n    line: {\n        flex: 1,\n        height: 0.3,\n        backgroundColor: 'darkgray',\n    },\n})\n

\n