如何在React Native中移除Android启动屏后的白屏问题

Question

我有一个默认的React Native项目，从这个教程中安装，并使用此教程为我的项目添加了启动画面。然而，现在我遇到了以下问题：

• 0.5秒的启动画面照片
• 接着1.5秒的白屏
• 之后才启动我的应用程序。

最佳和最标准的解决方法是什么？ 我需要我的启动画面持续1秒钟，之后我的应用程序应该开始运行， 我已经阅读了更多文章，但我找不到解决React Native问题的方法。

<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>

- Saeed Heidarizarei

Answer 1

我通过遵循在@sergiulucaci on 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>

- kaushal

Answer 2

我也遇到过这个问题。在我的情况下，它是redux persist库，用于从存储中提取持久化状态并将其馈送到reducer中，这个过程需要大约1秒钟，而在这一秒钟内它会显示一个白屏短暂闪烁，然后才呈现实际的屏幕。

我使用的解决方法是：控制隐藏启动画面的部分位于JavaScript端，您可以使用它来进行隐藏。

componentDidMount() {
    SplashScreen.hide();
}

只需稍微延迟一下，它就会正常工作。

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

- ArkaneKhan

---

引用错误：找不到变量SplashScreen - Sam

@Sam 你需要使用 react-native-splash-screen。 - ThinkAndCode

这个 setTimeout 对我有用，我使用了500毫秒。 这个解决方案对我来说有点丑陋，但我找不到其他合适的解决方法。 - jhpg

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文档的消息

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

- Jonathan Sanchez

---

React Native文档中有一篇名为“发布到应用商店的专业技巧”的文章，您可以在以下链接中找到：https://reactnative.dev/docs/publishing-to-app-store#pro-tips。 - aryanm

Answer 4

这里有另一种适用于iOS和Android的解决方案：https://github.com/mehcode/rn-splash-screen。 我在我的app.tsx（入口点）的render函数中隐藏了启动画面，并显示相同的图片，直到所有https请求完成。

我的代码：

public render()
    {
        SplashScreen.hide();

       //after everything has finished loading - show my app.
       if (this.state.isFinishedloading) 
        {
            return (
                <this.navigator screenProps={{ ...providers }} />
            );
        }

      // Until then show the same image as the splash screen with an ActivityIndicator.
        return (
           <View style={{ flex: 1 }}>
              <Image style={styles.image} source={require('../assets/img/splash.png')} >
                <ActivityIndicator  style={styles.indicator} color="#fff"></ActivityIndicator>
              </Image>
           </View>
        );

    }

- neomib

Answer 5

第一步：
运行npm i react-native-splash-screen --save

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

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

手动安装
Android:
1：在你的 android/settings.gradle 文件中添加以下内容：

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

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

...
dependencies {
    ...
    compile project(':react-native-splash-screen')
}

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

// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreenReactPackage;
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreenReactPackage;

public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        protected boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
            new SplashScreenReactPackage()  //here
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

示例代码：

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Linking,
} from 'react-native'
import SplashScreen from 'react-native-splash-screen'

export default class example extends Component {

    componentDidMount() {
        SplashScreen.hide();
    }


    render() {
        return (
            <TouchableOpacity
                style={styles.container}
                onPress={(e)=> {
                    Linking.openURL('http://www.devio.org/');
                }}
            >
                <View >
                    <Text style={styles.item}>
                        SplashScreen 启动屏
                    </Text>
                    <Text style={styles.item}>
                        @：http://www.devio.org/
                    </Text>
                    <Text style={styles.item}>
                        GitHub:https://github.com/crazycodeboy
                    </Text>
                    <Text style={styles.item}>
                        Email:[e-mail]
                    </Text>
                </View>
            </TouchableOpacity>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f3f2f2',
        marginTop: 30
    },
    item: {
        fontSize: 20,
    },
    line: {
        flex: 1,
        height: 0.3,
        backgroundColor: 'darkgray',
    },
})

- Saeed Heidarizarei

---

我试过两次使用这个库，它有很多问题，似乎会导致构建失败。我认为这可能是由于React Native和Android/iOS环境的不断变化而造成的。 - kevincoleman

Answer 6

最近我遇到了这个问题（RN v0.62.2，iPhone），但我通过遵循React Native官方文档的步骤解决了它。

https://reactnative.dev/docs/running-on-device#2-configure-release-scheme

- Jason Jin

Answer 7

我遇到了这个问题，花了很多时间进行调试。

解决方法：我的一个组件中有CSS属性重复。删除重复内容后，白屏问题得以解决。

- Ahsanwarsi

Answer 8

iOS开发

  UIStoryboard *sb = [UIStoryboard storyboardWithName:@"LaunchScreen" bundle:nil];
  UIViewController *vc = [sb instantiateInitialViewController];
  UIView* launchScreenView = vc.view;
  launchScreenView.frame = self.window.bounds;
  rootView.loadingView = launchScreenView;

- Vivek

Answer 9

我也遇到了这个问题。

将启动画面背景颜色更改为下一个屏幕上使用的颜色，可以解决两个平台的问题。

- Daria Kozlova

Answer 10

我通过将白屏的颜色与启动画面的颜色相同来解决了 Android 的问题。

- Blogger Klik

---

@James Risner 我写了，但没有人关注。那些知道得太多的人立刻失去了。 - Blogger Klik

请在回答帖子中保留您询问的部分。我认为您需要检查剩下的内容，以确保它被看作是对页面顶部问题的回答。 - Yunnosch