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<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>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文件代码为：

<?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, { 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 (
      <Provider store={store}>
        <AppWithNavigationState />
      </Provider>
    );
  }
}

IOS的配置，后续更新，本人目前还没尝试不敢乱写，各位小伙伴可以去看官方教程，官方教程写的还是很清楚的。