Question

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

0.5 secend splash screen photo
然后1.5秒白屏
然后我的应用开始了，

解决此问题的最佳方法是什么？ 我需要只有1个标准预加载启动屏幕和该应用程序启动后，我读了更多的文章，但我不能通过本地反应来解决。

"my normal string"

Answer 1

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

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

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

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

这是ios和android的另一个解决方案：https://github.com/mehcode/rn-splash-screen。我将启动画面隐藏在app.tsx（入口点）的渲染功能中，并显示相同的图像，直到我的所有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>
        );

    }

Answer 3

我也经历过这个问题。在我的情况下，是redux持久性库，用于从存储中提取持久性状态并将其输入到reducer中，该过程在那一秒中花费了将近1秒钟的时间，该过程用于向白屏显示一些闪烁，然后呈现实际的屏幕。

我所用的解决方法是，实际上隐藏飞溅的控件在javascript端，您正在执行此操作以隐藏它。

componentDidMount() {
    SplashScreen.hide();
}

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

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

Answer 4

第一：
运行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:crazycodeboy@gmail.com
                    </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',
    },
})

Answer 5

最近我遇到了这个问题（RN v0.62.2，iPhone），不过我可以通过遵循React Native官方文档来解决。

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

Answer 6

如果出现此问题，请花大量时间进行调试。

解决方案：CSS属性在我的一个组件中重复。删除重复修复白屏问题。

Answer 7

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

Answer 8

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

export default class App extends Component {

    async 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:crazycodeboy@gmail.com
                    </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',
    },
})

Answer 9

iOS

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

Answer 10

也有这个问题。

将初始屏幕背景颜色更改为我在下一屏幕上使用的背景颜色，从而保存了两种平台的情况

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

10 个答案:

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

这是 React Native 文档消息