react native结合原生代码实现启动页滚屏效果

添加依赖

    "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 {
+  @Override
+   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文件代码为：

<?xml version="1.0" encoding="utf-8"?>
<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文件请自行创建）：

<?xml version="1.0" encoding="utf-8"?>
<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);

代码我后面会贴出来。