在 React Native 应用程序中实现启动画面的简单方法

Question

我是 React-Native 开发的新手。我尝试在我的应用程序中实现启动画面。我尝试了很多来自网络的选项但没有成功，因为一些代码已经过时并且一些过程非常混乱。

Answer 1

import SplashScreen from 'react-native-splash-screen'

export default class WelcomePage extends Component {

    componentDidMount() {
        // do stuff while splash screen is shown
        // After having done stuff (such as async tasks) hide the splash screen
        SplashScreen.hide();
    }
}

要了解更多信息，请参阅 examples

制作full screen

On MainActivity.java, just like that:

@Override
protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this, R.style.SplashTheme); // Add theme here 
    super.onCreate(savedInstanceState);
}


IN res/values/styles.xml

<resources>

    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
   <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowActionBar">true</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowDrawsSystemBarBackgrounds">false</item>
</style>

</resources>

launch_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

Answer 2

我推荐 react-native-bootsplash，因为它仍在积极维护中。在实施任何要求您将代码添加到 Swift 和 Java 桥接文件的库之前，最好先熟悉 RN 文件夹结构。一旦您了解了文件夹结构和一些主要文件，调试您的应用程序就会变得更加容易，您将能够更快地开发应用程序。

在 React Native 应用程序中实现启动画面的简单方法

Easy way to implement splash screen in React Native application

splash-screen

reactjs

react-native