
 添加依赖
"react-native-splash-screen": "^3.2.0",执行命令,关联原生配置
npx react-native link react-native-splash-screen在项目目录android/app/build.gradle文件中,将:react-native-splash-screen项目添加为编译时依赖项:
dependencies {
     implementation project(':react-native-splash-screen')
     ...
}在项目目录android/app/src/main/java/com/awesome(awesome是我建项目的时候的文件名)/MainActivity.java文件:
- 前面带+的加入到文件里面,其他的正常情况是都有的。
 
+ import android.os.Bundle; // here
 
import com.facebook.react.ReactActivity;
 
+ import org.devio.rn.splashscreen.SplashScreen; // here
 
public class MainActivity extends ReactActivity {
+  
+   protected void onCreate(Bundle savedInstanceState) {
+       SplashScreen.show(this);  // here
+       super.onCreate(savedInstanceState);
+   }
}在项目目录android/app/src/main/res下创建:
 创建layout文件夹(已有请忽略)
在layout文件夹下创建launch_screen.xml文件(已有请忽略)launch_screen.xml文件代码为:
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/launch_screen">
</LinearLayout>上面代码里面android:background="@drawable/launch_screen" launch_screen是启动页图片名称,可自行替换对应的图片名称
在项目目录android/app/src/main/res下创建:
 创建 drawable-ldpi文件夹,放入对应的启动页图片
创建 drawable-mdpi文件夹,放入对应的启动页图片
创建 drawable-hdpi文件夹,放入对应的启动页图片
创建 drawable-xhdpi文件夹,放入对应的启动页图片
创建 drawable-xxhdpi文件夹,放入对应的启动页图片
创建 drawable-xxxhdpi文件夹,放入对应的启动页图片
在项目目录android/app/src/main/res/values/colors.xml下(没有colors.xml文件请自行创建):
 
<resources>
    <color name="status_bar_color">#000000</color>
</resources>react-native 用法
 在src/App.js里面:
import React from 'react';
import SplashScreen from 'react-native-splash-screen';
import Navigator from './navigator'
import {
    View,
} from 'react-native';
export default class App extends React.Component {
    componentDidMount() {
        // 在入口文件处隐藏掉启动页
        SplashScreen.hide(); // 关闭启动屏幕
    }
    render() {
        return (<View style={{flex:1}}>
            <Navigator />
        </View>)
    }
}.navigator.js
import {createStackNavigator} from 'react-navigation-stack';
import BottomNavigator from './page/root/rootPage';
import {createAppContainer} from 'react-navigation';
const AppStack=createStackNavigator(
    {
        BottomNavigation:{
            screen:BottomNavigator,
            navigationOption:{
                headerShow:false
            }
        }
    },{
        mode:'modal',
        headerMode:'none'
    }
);
export default createAppContainer(AppStack);代码我后面会贴出来。










