[移动开发]RN：启动屏配置

IOS配置启动屏

1、创建图片资源

打开项目，进入该文件夹，右键选择 new image set，也就是创建几个图片类型

2、设置启动屏

点击 LaunchScreen.storyboard 文件，点击右上角 + 选择我们刚刚创建的图片资源，拖动到页面中

3、安装react-native-splash-screen

这里不管 Android 还是 IOS 安装一遍就好了

npm i react-native-splash-screen --save
react-native link react-native-splash-screen

具体的可以看官方文档

4、配置react-native-splash-screen

打开 IOS 目录下 AppDelegate.m 文件，添加如下带 here 的：

#import <React/RCTRootView.h>
#import "RNSplashScreen.h"  // here
@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  [RNSplashScreen show];  // here
  return YES;
}

打开项目文件 app.js

import SplashScreen from 'react-native-splash-screen'

export default class WelcomePage extends Component {

    componentDidMount() {
    	// do stuff while splash screen is shown
        // After having done stuff (such as async tasks) hide the splash screen
        SplashScreen.hide();
    }
}

5、重新打包

点击 xcode 左上角的三角播放就可以了（或者 yarn ios），打包完自动运行模拟器了。

ios模拟器按两下home键调出后台，有时可能不太好使，多打开几个app多按几次

Android配置启动屏

1、创建图片资源

android/app/src/main/res 目录下有几个mipmap文件夹，根据规则将图片放进去并命名为 launch_screen.png

2、设计你的启动页

新建launch_screen.xml文件：
在 /android/app/src/main/res 文件夹下新建 layout 文件夹，在 layout 文件夹中新建 launch_screen.xml（如何新建看下图）

这是图形界面：左边是一些模块，右边是具体的样式。

当然你也可以修改这个文件 launch_screen.xml 的代码，来生成样式。

当当然，我觉得启动页就不要自己用代码搞了，让设计给你设计启动页的图片好了，不同分辨率图片要不一样哦。

3、安装react-native-splash-screen

这里不管 Android 还是 IOS 安装一遍就好了

npm i react-native-splash-screen --save
react-native link react-native-splash-screen

具体的可以看官方文档

4、配置react-native-splash-screen

打开 Android 目录下 MainActivity.java 文件，添加如下带 here 的：

import org.devio.rn.splashscreen.SplashScreen; // here
@Override
protected ReactActivityDelegate createReactActivityDelegate() {
  // 这里定义了在加载js的时候，同时弹起启动屏
  SplashScreen.show(this);  // here
  return new ReactActivityDelegate(this, getMainComponentName()) {
    @Override
    protected ReactRootView createRootView() {
      return new RNGestureHandlerEnabledRootView(MainActivity.this);
    }
  };
}

打开项目文件 app.js

import SplashScreen from 'react-native-splash-screen'

export default class WelcomePage extends Component {

    componentDidMount() {
    	// do stuff while splash screen is shown
        // After having done stuff (such as async tasks) hide the splash screen
        SplashScreen.hide();
    }
}

5、重新打包

yarn android
# or
react-native run-android
# or
安卓 studio 的 build

参考资料

https://github.com/kk412027247/splashExample
https://github.com/crazycodeboy/react-native-splash-screen（有示例）