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

Question

我从这个 turorial and I added a splash screen to my Project with this tutorial 安装了一个默认的 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>

Answer 1

这是 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 2

有这个问题，花了很多时间调试。

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

Answer 3

第一个：
运行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 4

我也遇到过这个问题。在我的例子中，它是 redux persist 库，它用于从存储中提取持久状态并将其提供给 reducer，这个过程在那一秒内花费了将近 1 秒，它用来显示白屏有点闪烁，然后渲染实际屏幕.

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

componentDidMount() {
    SplashScreen.hide();
}

只要稍微延迟一下就可以了。

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

Answer 5

我按照 @sergiulucaci on GitHub 提到的步骤解决了这个问题，它奏效了

Go to 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 6

也有这个问题。

将初始屏幕背景颜色更改为我在下一个屏幕上使用的颜色可以挽救两个平台的情况

Answer 7

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 8

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

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

Answer 9

这是我针对 IOS - 2021 年 RN v.063

的解决方案

来自 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 10

对于iOS

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

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

How to Remove White Screen after Splash Screen in React Native For Android

splash-screen

react-native

这是我针对 IOS - 2021 年 RN v.063

这里是 React Native 文档消息