給react-native添加圖標和啟動屏

react native 項目默認是沒有圖標，並且啟動頁面只有文字。這個樣子並不能算是一個完整的APP，現在就給APP加一個圖標和一個適應所有屏幕尺寸的啟動圖，並且設置啟動圖遮住項目啟動時候的白色閃屏。
首先我們來創建一個新項目

react-native init splashExample

首先我們修改應用名稱
Android
編輯 android/app/src/main/res/values/strings.xml 文件：

<resources>
    <!-- <string name="app_name">splashExample</string> -->
    <string name="app_name">測試程序</string>
</resources>

接下來是圖片的准備
先從圖標開始，一套圖標需要各種大大小小的尺寸。
如果沒有設計師朋友的話，我們可以用工具批量生成，現在需要一張1024*1024的母版即可。
圖片鏈接
https://raw.githubusercontent.com/kk412027247/splashExample/master/image/icon.png
圖片處理工具
https://icon.wuruihong.com/

上傳之后處理之后，會下載得到一個壓縮包，解壓之后會看到得到了一堆各種尺寸的圖標文件。

我們可以直接用生成好的內容替換默認的圖標即可。
1.Android
替換 android/app/src/main/res 下對應的圖標。

運行項目看我們的圖標改了沒有


我們會發現測試機上面出現了APP圖標，並且更改了名字為測試程序
接下來我們給react-native項目添加啟動頁
Android
添加啟動頁可以使用 react-native-splash-screen 庫，通過它可以控制啟動頁的顯示和隱藏。
第一步：安裝$ yarn add react-native-splash-screen
第二步:編輯 MainActivity.java，添加顯示啟動頁的代碼：

整理啟動屏圖片
現在開始添加啟動頁面，啟動頁面的操作需要寫IOS與安卓的源碼，但是也沒太復雜，跟着一步步來即可。
這里提供了三張不同分辨率，但是和圖標一樣的啟動圖，這樣用戶在點擊圖標的時候，視覺上感覺是進入了app。
我們先改一下app頁面的背景顏色，以及狀態欄的顏色，編輯 app.js，整體代碼如下

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

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,
  },
});

修改好的頁面如下

添加安卓啟動屏
首先需要先把不同尺寸的圖片放到資源文件夾。
splashExample/android/app/src/main/res 目錄下有幾個mipmap文件夾，根據以下的規則把圖片拖進去，然后把文件名統一改成splash.png。

mipmap-mdpi = splash.png
mipmap-hdpi = [e-mail]
mipmap-xhdpi = [e-mail]
mipmap-xxhdpi = [e-mail]

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

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

這個頁面也就是啟動屏。
如果要調整頁面填充拉伸之類的，可以在Android Atudio 的Design可視化模式調整。
在splashExample/android/app/src/main/res/values文件夾下新建colors.xml，並編輯。

到這里定義一個和背景顏色一樣的顏色名。

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

編輯splashExample/android/app/src/main/res/values/styles.xm文件，增加以下代碼。

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--設置透明背景-->
        <item name="android:windowIsTranslucent">true</item>
    </style>
</resources>

這個頁面會和啟動頁一起彈起，並且擋在啟動頁前面，所以要把這頁設成透明。
編輯android/app/src/main/java/com/splashexample/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) {
        // 這里定義了在加載js的時候，同時彈起啟動屏
        // 第二個參數true，是啟動頁全屏顯示，隱藏了狀態欄。
        SplashScreen.show(this, true);
        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";
    }
}

最后一步運行項目
即可