React Native入门篇—react-native-splash-screen的安装和配置
注意：未经允许不可私自转载，违者必究
React Native官方文档：https://reactnative.cn/docs/getting-started/
react-native-splash-screen官方文档：https://github.com/crazycodeboy/react-native-splash-screen
项目地址GitHub地址：https://github.com/zhouwei1994/nativeCase.git
安装react-native-splash-screen
在项目目录下cmd里面运行以下命令：
yarn add react-native-splash-screen
//关联原生配置
react-native link react-native-splash-screen没有安装yarn镜像的请看教程：https://blog.csdn.net/weixin_40614372/article/details/86154119
Android原生配置
在项目目录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')
注意：添加前请看一下当前文件里面有没有对应的配置，react-native link react-native-splash-screen命令貌似可以自动添加上面这一段话
-
在项目目录android/app/build.gradle文件中，将:react-native-splash-screen项目添加为编译时依赖项：
dependencies { ...
compile project（'：react-native-splash-screen '）
}在项目目录android/app/src/main/java/com/nativeCase(nativeCase 是我建项目的时候的文件名)/MainApplication.java文件：
前面带+的加入到文件里面，其他的正常情况是都有的。
+ import org.devio.rn.splashscreen.SplashScreenReactPackage;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
+ new SplashScreenReactPackage() //加
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
} 在项目目录android/app/src/main/java/com/nativeCase(nativeCase 是我建项目的时候的文件名)/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文件代码为：
上面代码里面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文件请自行创建）：
#000000
react-native 用法
在src/App.js里面：
import React, { Component } from 'react';
import { ToastAndroid, BackHandler, StatusBar } from 'react-native';
import { NavigationActions } from "react-navigation";
import { Provider } from 'react-redux';
//引入react-native-splash-screen
import SplashScreen from 'react-native-splash-screen';
import { store, AppWithNavigationState } from './store/index';
export default class Root extends React.Component {
componentDidMount() {
// 在入口文件处隐藏掉启动页
SplashScreen.hide(); // 关闭启动屏幕
}
render() {
return (
);
}
}
IOS的配置，后续更新，本人目前还没尝试不敢乱写，各位小伙伴可以去看官方教程，官方教程写的还是很清楚的。
项目地址GitHub地址：https://github.com/zhouwei1994/nativeCase.git
注意：未经允许不可私自转载，违者必究