添加依赖
"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);
代码我后面会贴出来。