React Native App 添加icon和启动页面

我们先创建一个新项目

react-native init splashExample

icon添加比较简单，我们先处理icon。

先从图标开始，一套图标需要各种大大小小的尺寸，如果没有设计师朋友的话，我们可以用工具批量生成，现在需要一张1024*1024的母版即可。

图片地址：https://raw.githubusercontent.com/kk412027247/splashExample/master/image/icon.png

工具地址：
https://apetools.webprofusion.com/app/#/tools/imagegorilla；

icon_generlator.png

上传之后处理之后，会下载得到一个压缩包，解压之后会看到得到了一堆各种尺寸的图标文件。

file.png

用xcode打开IOS项目，把下载好的IOS图标拖到Imagees.xcassets / AppIcon文件夹中，xcode会自动根据图片的大小匹配图标，如果有些图标出现黄色的警告，删掉即可，这里要小心，别删错了整个目录。

drag_IOS.png

IOS的icon添加完毕，现在启动项目看看效果了，很简单，已经成功了。

ios_icon.png

安卓添加图标更加简单，在/splashExample/android/app/src/main/res 目录下 一堆mipmap目录，
替换掉以下相应目录中的ic_launcher.png就可以了，
mipmap-hdpi
mipmap-mdpi
mipmap-xhdpi
mipmap-xxhdpi
（drawable-hdpi相对mipmap-hdpi，以此类推）

drag_android.png

启动安卓项目的时候，发现图标已经添加成功，简直不要太简单。

android_icon.png

--------稍微休息一下的分割线---------

现在开始添加启动页面，启动页面的操作需要写IOS与安卓的源码，但是也没太复杂，跟着一步步来即可。

这里提供了三张和图标一样的图，这样用户在点击图标的时候，视觉上感觉是进入了app。
我们先改一下app页面的背景颜色，以及状态栏的颜色，编辑 app.js，整体代码如下

https://raw.githubusercontent.com/kk412027247/splashExample/master/image/splash.png
https://raw.githubusercontent.com/kk412027247/splashExample/master/image/splash%402x.png
https://raw.githubusercontent.com/kk412027247/splashExample/master/image/splash%403x.png

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  StatusBar
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <StatusBar
          backgroundColor={'#4f6d7a'}
          barStyle={'light-content'}
        />
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#4f6d7a',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#f5fcff',
  },
  instructions: {
    textAlign: 'center',
    color: '#f5fcff',
    marginBottom: 5,
  },
});

修改好的页面如下

app.png

在xcode打开ISO项目，点击LaunchScreen.xib目录，点击VIew组件，删除 splashExample 与 Powered by React Native这两个原来就有的文本框，点击右下角有个铜钱样子的图标输入image，会找到一个一个Image VIew，把他拖到View的中间，图片样式点击右上角一个倒三角的图标 Image选项选择Image，Content Mode 选择 Aspet Fit。这里的意思是选择图片的来源以及不拉伸。View 的背景颜色选择4f6d7a。

set_ios_splash_1.png

选中中间的图片，再点击右上角的小尺子图标，在Autoresizing把四周红线点掉，点亮中间四个箭头。这里的意思是图片根据屏幕自适应大小与位置。

set_splash_ios_2.png

到这里ios的启动页面已经添加完毕，从xcode启动项目检查一下。发现启动页面和进入app中间有一个短暂的白色闪烁，这是因为这个期间bundle.js正在加载，解决方法是让启动页面等bundle.js加载完毕再消失，遮住这个闪烁就好。

ios_flash.gif

这里我们需要添加第三方组件。
目前最新版3.0.7 在安卓中有bug，所以这里安装3.0.6版。

yarn add react-native-splash-screen@3.0.6
react-native link react-native-splash-screen

打开xcode编辑 AppDelegate.m， 全部代码如下

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

//引入SplashScreen库
#import "SplashScreen.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"splashExample"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  
  //运行SplashScreen库
  [SplashScreen show];
  
  return YES;
}

@end

修改 app.js 添加以下代码

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

export default class App extends Component<Props> {

    componentDidMount() {
        // 组件加载完毕之后，隐藏启动页
        SplashScreen.hide();
    }
}

最后一下状态栏的文字颜色，变成统一的白色。

status_bar_style.png

大功告成

ios_finish.gif

--------再歇一下的分割线---------

安卓设置启动页面就相当复杂了，
注意因为已经安装了react-native-splash-screen缘故，一定要跟以下步骤修改完所有代码，否则安卓项目运行不起来。
不要放弃，胜利就在眼前。

首先需要先把不同尺寸的图片放到资源文件夹，
android/app/src/main/res 目录下有几个mipmap文件夹，根据以下的规则把图片拖进去，然后把文件名统一改成splash.png。
mipmap-mdpi = splash.png
mipmap-hdpi = splash@2x.png
mipmap-xhdpi = splash@3x.png
mipmap-xxhdpi = splash@3x.png

drag_android_splash.png

用android打开android项目，在res文件夹下新建一个drawable文件夹。右键点击drawable新建一个background_splash.xml文件

create_background_splash.png

编辑 background_splash.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/primary_dark"/>

    <item
        android:width="200dp"
        android:height="200dp"
        android:drawable="@mipmap/splash"
        android:gravity="center"/>

</layer-list>

在android/app/src/main/res/values文件夹下新建colors.xml，并编辑。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="blue">#4F6D7A</color>
</resources>

编辑android/app/src/main/res/values/styles.xm文件，增加以下代码

<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/background_splash</item>
    <item name="android:statusBarColor">@color/blue</item>
</style>

这里是启动出现的画面，启动页面背景图以及重写了状态栏的颜色。

接下来编辑 splashExample/android/app/src/main/AndroidManifest.xml ，代码如下
注意：android:allowBackup="true" ，如果不指定true，项目编译会出错。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.splashexample">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="true"
      android:theme="@style/AppTheme">

        <!--增加SplashActivity组件的引用-->
      <activity android:name=".SplashActivity"
        android:theme="@style/SplashTheme"
        android:label="@string/app_name">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>

        <!--修改原来的主组件-->
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize"
        android:exported="true"/>

      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

在java/com.[项目]/ 目录下新建一个SplashActivity.java

create_java.png

编辑SplashActivity.java

package com.splashexample;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity{
    @Override
    protected void onCreate(Bundle saveInstanceState){
        super.onCreate(saveInstanceState);

        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}

编辑java/com.[项目]/MainActivity.java

package com.splashexample;

import android.os.Bundle;

import com.facebook.react.ReactActivity;

import org.devio.rn.splashscreen.SplashScreen;

public class MainActivity extends ReactActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);
        super.onCreate(savedInstanceState);
    }

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "splashExample";
    }
}

在res文件夹下新建layout文件夹，在layout文件夹中新建launch_screen.xml

create_layout.png

编辑 launch_screen.xml，这个页面是在启动页之后出现，也就是这个页面挡住了安卓加载的白屏。
android:layout_marginTop="-24dp"，因为顶部有24dp的状态栏，所以要往上提升24dp，保持与第一张页面一致。

<?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="@color/blue"
    android:gravity="center">

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="-24dp"
        android:src="@mipmap/splash"
        />
</LinearLayout>

编辑colors.xml，添加

<color name="primary_dark">#4F6D7A</color>

从android studio启动项目，上面的代码已经一并解决了安卓白色闪屏的问题，大功告成。

1_tfH-JhMPyMZrJmDAPviQ0w.gif

最后附上项目的github地址
splashExample