經(jīng)過第一部分開發(fā) React Native APP —— 從改造官方 Demo 開始（一）介紹誓焦，App 框架基本構(gòu)建完成庶溶，這部分主要討論 UI/交互杈绸、App 發(fā)布前的準(zhǔn)備工作及如何發(fā)布，具體內(nèi)容包括：

• 在使用 react navigation 的前提下替久，iOS 實(shí)現(xiàn)單個頁面從下往上（modal）的進(jìn)入動畫
• 尺寸自適應(yīng)
• 設(shè)置啟動頁阔挠，更換桌面圖標(biāo)镀层、app 展示名稱嗜浮、appID
• 打包發(fā)布

一 擴(kuò)展 react navigation

這里的擴(kuò)展指的是實(shí)現(xiàn)可單獨(dú)配置頁面的進(jìn)入方式（react navigation 默認(rèn)只支持全局配置嘉汰，要么 card丹禀，要么 modal，配置后所有頁面進(jìn)入動畫相同）郑现。

實(shí)現(xiàn)上述效果需要做兩方面修改：StackNavigator API（在 route.js 中使用）和進(jìn)入某個頁面是的調(diào)用方式湃崩。

1.1 修改 StackNavigator API

修改后如果使頁面默認(rèn)狀態(tài)為 card，只需要輸入對應(yīng)頁面即可接箫，比如 ..navigate('ScreenSome1')攒读；如果要使某個頁面進(jìn)入方式為 modal 只需要在路徑上加上 Modal 比如：..navigate('ScreenSome2Modal')。

需要注意的是如果頁面進(jìn)入方式為 modal辛友，需要自定義 header薄扁，因為默認(rèn) header 樣式失效，都疊在一塊了废累。

/**
 * route.js
 * 自定義 StackNavigator邓梅，可以選擇 screen 進(jìn)入方式
 */
const StackModalNavigator = (routeConfigs, navigatorConfig) => {
  const CardStackNavigator = StackNavigator(routeConfigs, navigatorConfig);
  const modalRouteConfig = {};
  const routeNames = Object.keys(routeConfigs);

  for (let i = 0; i < routeNames.length; i++) {
    modalRouteConfig[`${routeNames[i]}Modal`] = routeConfigs[routeNames[i]];
  }

  const ModalStackNavigator = StackNavigator(
    {
      CardStackNavigator: { screen: CardStackNavigator },
      ...modalRouteConfig
    },
    {
      // 如果頁面進(jìn)入方式為 modal，需要自定義 header（默認(rèn) header 樣式失效邑滨，都疊在一塊了）
      mode: "modal",
      headerMode: "none"
    }
  );

  return ModalStackNavigator;
};

// 設(shè)置路由
const AppNavigator = StackModalNavigator();

1.2 頁面中調(diào)用

首先我們新建頁面 ScreenSome2日缨，接下來就讓它以 modal 的形式進(jìn)入（從屏幕下面進(jìn)入），作為對比 ScreenSome1 以 card 的形式進(jìn)入（默認(rèn)進(jìn)入方式掖看，從屏幕右側(cè)進(jìn)入）匣距。

因為以 modal 形式進(jìn)入的頁面需要自定義 header，一般只是一個關(guān)閉按鈕哎壳，以 ScreenSome2 為例：

/**
 * ScreenSome2/view.js
 * 自定義 header（關(guān)閉按鈕）
 */
<View>
  {/* TouchableHighlight 為關(guān)閉按鈕的熱區(qū) */}
  <TouchableHighlight
    onPress={() => self.navigation.goBack()}
    underlayColor="transparent"
    style={{
      display: "flex",
      justifyContent: "center",
      marginTop: pxToDp(30),
      width: pxToDp(150),
      height: pxToDp(90),
      backgroundColor: "yellow"
    }}
  >
    <Text style={{ marginLeft: pxToDp(24) }}>關(guān)閉</Text>
  </TouchableHighlight>

  <Text style={{ fontSize: pxToDp(36) }}>some2毅待，以 modal 的形式進(jìn)入</Text>
</View>

然后就是更改進(jìn)入 ScreenSome2 代碼，這里是 ScreenHome 頁面中的代碼：

/**
 * ScreenHome/view.js
 * 自定義 header（關(guān)閉按鈕）
 */

{
  /* ScreenSome2 從屏幕右側(cè)進(jìn)入 */
}
<Button
  title="goSome1"
  onPress={() => self.navigation.navigate("ScreenSome1")}
/>;

{
  /* ScreenSome2 從屏幕下面進(jìn)入 */
}
<Button
  title="goSome2Modal"
  onPress={() => self.navigation.navigate("ScreenSome2Modal")}
/>;

最終效果圖：

自定義頁面進(jìn)入動畫

二 自適應(yīng)

自適應(yīng)主要包括兩方面：尺寸根據(jù)屏幕大小自適應(yīng)归榕，包括 fontSize尸红，width 等；圖片分辨率根據(jù)屏幕分辨率自適應(yīng)刹泄，也就常說的二倍圖外里、三倍圖等。

2.1 尺寸自適應(yīng)

尺寸自適應(yīng)的原理是通過獲取手機(jī)屏幕的寬度特石，尺寸做相應(yīng)比例的調(diào)整级乐，為此封裝了一個工具函數(shù)，放在了 config/pxToDp.js 中县匠。

調(diào)整后的目錄如下：

尺寸轉(zhuǎn)換函數(shù)目錄

• config/pxToDp.js 尺寸轉(zhuǎn)換的工具函數(shù)

尺寸轉(zhuǎn)換的工具函數(shù)在第一部分開發(fā) React Native APP —— 從改造官方 Demo 開始（一）已經(jīng)添加

1）編寫自適應(yīng)尺寸工具函數(shù)

因為所有涉及尺寸的數(shù)據(jù)都要轉(zhuǎn)換（fontSize，width等），所以對轉(zhuǎn)換后的數(shù)據(jù)要做處理乞旦，保證：1.大于等于 1 的數(shù)字向上取整贼穆；2.小于 1 的數(shù)字，如果是 ios 平臺統(tǒng)一設(shè)為 0.5兰粉；如果是安卓平臺統(tǒng)一設(shè)為 1（因為安卓平臺分辨率千差萬別萬別故痊，低分辨率的屏幕顯示 0.5 的尺寸會有鋸齒狀）。工具函數(shù)完整代碼如下：

/**
 * pxToDp.js
 * 自適應(yīng)布局
 * @param uiElementPx: ui給的原始尺寸
 */

import { Dimensions, Platform } from "react-native";

// app 只有豎屏模式玖姑，所以可以只獲取一次 width
const deviceWidthDp = Dimensions.get("window").width;

// UI 默認(rèn)給圖是 750
const uiWidthPx = 750;

function pxToDp(uiElementPx) {
  const transferNumb = uiElementPx * deviceWidthDp / uiWidthPx;

  if (transferNumb >= 1) {
    // 避免出現(xiàn)循環(huán)小數(shù)
    return Math.ceil(transferNumb);
  } else if (Platform.OS === "android") {
    // 如果是安卓愕秫，最小為1，避免邊框出現(xiàn)鋸齒
    return 1;
  }
  return 0.5;
}

export default pxToDp;

實(shí)際上焰络，通過 Dimensions.get('window').width 獲取的屏幕寬度和自己想象的可能有出入戴甩，比如，iphone7 屏幕 4.7''闪彼，獲取到的寬度是 375甜孤，華為 P9 是 5.2'，但獲取到的寬度卻是是 360畏腕！有點(diǎn)坑缴川，這個工具函數(shù)還有待優(yōu)化。

2）使用自適應(yīng)尺寸工具函數(shù)

使用方法很簡單描馅，在需要轉(zhuǎn)換單位的組件中將轉(zhuǎn)換尺寸的工具函數(shù)引入把夸，將需要轉(zhuǎn)換的尺寸傳入工具函數(shù)即可，以 ScreenHome 為例：

/**
 * ScreenHome/view.js
 */

// 引入尺寸轉(zhuǎn)換工具函數(shù)
import pxToDp from "../../config/pxToDp";

// 將需要轉(zhuǎn)換的單位傳入 pxToDp 中
<Text style={{ fontSize: pxToDp(36) }}>home</Text>;

2.3 圖片分辨率自適應(yīng)

手機(jī)分辨率越來越多铭污，尤其安卓恋日，React Native 可以根據(jù)不同分辨率加載不同尺寸的圖片，只需在圖片命名上面加以區(qū)分况凉。

• 提供不同分辨率的圖片

比如我們有張圖片叫 test.png谚鄙，尺寸為 40 x 40（單位像素），為了做到自適應(yīng)屏幕分辨率刁绒，我們還需要提供它的 2 倍圖闷营，3 倍圖，這樣知市，一張圖片就對應(yīng) 3 個尺寸傻盟，如下：

# 一張圖片提供 3個尺寸

test.png # 尺寸 40 x 40
test@2x.png # 尺寸 80 x 80
test@3x.png # 尺寸 120 x 120

name@nx是 n (n > 1) 倍圖命名規(guī)范，React Native 也是根據(jù)命名判斷圖片尺寸的嫂丙。

• 使用

在引用圖片的時候直接使用 不加倍率后綴的圖片名娘赴，比如，直接使用 test.png跟啤，如下：

/**
 * ScreenTab3/view.js
 */

<Image
  source={require("../../assets/images/test.png")}
  style={{ height: pxToDp(80), width: pxToDp(80) }}
/>

最終效果圖如下：

• iphone6： 2 倍圖（圖片放大后可以看到里面有 2X 字樣）
• iphone7Plus：3 倍圖（圖片放大后可以看到里面有 3X 字樣）
• Nexus4：2 倍圖
• Pixel2：3 倍圖

自定加載不同分辨率圖片

三 修改桌面圖標(biāo)诽表、App 展示名稱唉锌，設(shè)置啟動頁

修改桌面圖標(biāo)、App 展示名稱相對簡單竿奏，設(shè)置啟動頁稍微麻煩袄简。另外，iOS 修改桌面圖標(biāo)泛啸、App 展示名稱绿语，設(shè)置啟動頁都需要在 Xcode 中進(jìn)行。

3.1 設(shè)置桌面圖標(biāo)

因為 App 圖標(biāo)對應(yīng)多個尺寸候址，手動改寫太麻煩吕粹，這個網(wǎng)站可以自動生成 MakeAppIcon。

并不是所有尺寸的圖片都需要岗仑，見下文匹耕。

• iOS

準(zhǔn)確點(diǎn)講不能叫設(shè)置桌面圖標(biāo)，而應(yīng)該是 App 圖標(biāo)赔蒲，因為我們需要設(shè)置的不止有桌面展示的圖標(biāo)泌神，還有設(shè)置時 app 圖標(biāo)、消息推送時 app 圖標(biāo)舞虱，此外如果要發(fā)布到 App store欢际，還需要設(shè)置 Apple Store 展示用的 App 圖標(biāo)。

1）圖片準(zhǔn)備

以上不同地方用到的 app 圖標(biāo)尺寸各不相同矾兜，具體如下（只針對 iphone损趋，不包括 ipad，iwatch）：

名稱不是說一定要和上面相同镊靴，但 Icon 、尺寸（如 60）還有倍率（@nx）要有链韭，類型為 png偏竟。

2）將圖片拖放至 Xcode 指定位置，具體是：Project Navigator -> Images.xcassets -> AppIcon敞峭，如下圖

iOS AppIcon

拖放完成后踊谋，通過文件管理器查看項目目錄，也會發(fā)現(xiàn)相應(yīng)圖片旋讹。

• 安卓

安卓的 app 圖標(biāo)相對簡單殖蚕，只需要設(shè)置桌面圖標(biāo)轿衔。設(shè)置位置在 yourApp/android/app/src/main/res/ 目錄下，這個目錄默認(rèn)有四個文件夾睦疫，里面各對應(yīng)放置了一種尺寸的桌面圖標(biāo)圖片呀枢，圖片尺寸不同，但名稱相同笼痛，統(tǒng)一為 ic_launcher.png，具體如下所示：

如果你使用了 MakeAppIcon 的服務(wù)琅拌，直接將對應(yīng)文件夾全部放入 res/ 目錄下就好缨伊，不然就手動替換圖標(biāo)。

可以根據(jù)實(shí)際需求刪除不必要的文件进宝，比如刻坊，120 DPI 的屏幕很少了，那么這個文件夾就可以不要

3.2 修改 App 展示名稱

• iOS

調(diào)出工程設(shè)置菜單（雙擊工程名稱或者單擊然后然后右側(cè)選擇 Targets --> yourProject）党晋，進(jìn)入 info 選項谭胚，在 Custom iOS Target Properties 中添加 Bundle display name，其 value 便是 App 的名稱未玻。具體設(shè)置如下圖：

ios修改app名稱

• 安卓

安卓修改 App 展示名稱在這個文件中 yourApp/android/app/src/main/res/values/strings.xml灾而。

strings.xml 這個文件很簡單，全部內(nèi)容如下：

<resources>
    <string name="app_name">你的app名稱</string>
</resources>

替換 你的app名稱 為你想要的名字就好扳剿。

NOTE：

安卓的話旁趟，還要修改默認(rèn)包名（applicationId），如果不修改庇绽，如果系統(tǒng)監(jiān)測到當(dāng)前應(yīng)用的 applicationId 和已安裝的某個應(yīng)用相同而簽名不同锡搜，會報錯：“簽名不一致 該應(yīng)用可能已被惡意篡改”。

在這個文件中修改包名： yourApp/android/app/build.gradle：

// ...

defaultConfig {
    applicationId "com.yourAppId"
    // ...
}

// ...

3.3 設(shè)置啟動頁

這里使用了第三方插件react-native-splash-screen瞧掺，官網(wǎng)教程已經(jīng)很詳細(xì)耕餐，這里做簡要介紹。

• 項目中安裝依賴

1）下載依賴

yarn add react-native-splash-screen

2）添加到項目中

react-native link react-native-splash-screen

3）在 React Native 配置

這里指的是設(shè)置啟動頁什么時候消失辟狈，下面的代碼是首頁加載完 5s 后啟動頁消失肠缔。

/**
 * ScreenHome/index.js
 * 設(shè)置啟動頁消失時間
 */
import SplashScreen from "react-native-splash-screen"; // 引入 react-native-splash-screen

export default class ScreenHome extends Component {
  // ...other code
  componentDidMount() {
    // 隱藏啟動頁，如果不設(shè)置消失時間上陕，在組件加載完啟動頁自動隱藏
    setTimeout(() => {
      SplashScreen.hide();
    }, 5000);
  }
  // ...other code
}

• iOS 設(shè)置

1）更新 AppDelegate.m：

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "SplashScreen.h"  // 導(dǎo)入啟動頁插件

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...其他代碼
    [self.window makeKeyAndVisible];
    [SplashScreen show];  // 顯示啟動頁
    return YES;
}

@end

2）準(zhǔn)備啟動頁圖片

文件必須是 png 格式的圖片桩砰，命名需對應(yīng)尺寸，可參考下面的命名：

如需自動生成可使用這個網(wǎng)頁：appicon

NOTE:

• 很多教程給出的啟動頁尺寸比上面的要多，有可能是 Xcode 版本不同導(dǎo)致行疏，Xcode 9.2匆光，iOS 7+ 只需要上面七個尺寸；
• 名稱并非一定要按照上面的要求酿联，直接使用 Default尺寸x尺寸.png 也可以终息；

3）在 Xcode 中設(shè)置啟動頁

首先新建 LaunchImage 文件，操作步驟如下：

設(shè)置啟動頁

然后在 general 設(shè)置中將啟動頁指向剛才新建的 LaunchImage 文件贞让，注意 Launch Screen File 必須為空周崭，不然就指向 LaunchScreen.xib 中默認(rèn)的啟動頁了:

設(shè)置啟動頁

• 安卓配置

1）更新 MainActivity.java：

import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

2）新建 launch_screen.xml

在 app/src/main/res/layout 中創(chuàng)建 launch_screen.xml（如果沒有 layout 目錄，新建）喳张，內(nèi)容如下：

<?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>

3）準(zhǔn)備不同尺寸的啟動頁圖片并放到項目中

安卓是通過文件夾路徑尋找啟動頁面的续镇，所以，多張尺寸的啟動頁名稱相同销部，都為 launch_screen.png摸航，但要放在不同文件夾中，文件夾放置目錄為 yourApp/android/app/src/main/res/舅桩，名稱及對應(yīng)放置的圖片尺寸如下：

建議直接從 480x800 起步放置 4 張圖片就好酱虎。

4）優(yōu)化啟動頁出現(xiàn)前的短暫白屏

到這里，啟動頁功能已經(jīng) ok江咳，但如果仔細(xì)看逢净，可以看到啟動頁出現(xiàn)前會有短暫白屏，此時可通過更改android/app/src/main/res/values/styles.xml 解決：

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

這種方案實(shí)際沒有根本解決問題：會發(fā)現(xiàn)這樣設(shè)置以后點(diǎn)擊圖片不能立即彈出應(yīng)用歼指，而有短暫的等待時間爹土，待填坑。

5）解決安卓 6.0踩身，7.0 安裝配置完成后出現(xiàn)閃退胀茵，參考下面設(shè)置：

在 android/app/src/main/res/values 下面新建 colors.xml 文件，內(nèi)容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- this is referenced by react-native-splash-screen and will throw an error if not defined.  its value does nothing, just here to avoid a runtime error. -->
    <color name="primary_dark">#000000</color>
</resources>

因為 react-native-splash-screen 需要一個名為 primary_dark 的顏色值作為狀態(tài)欄的顏色挟阻。

3.4 最終效果圖

設(shè)置完桌面圖標(biāo)琼娘、修改 APP 展示名稱及設(shè)置啟動頁之后的效果圖如下：

圖標(biāo)及啟動頁

四 打包發(fā)布

4.1 安卓打包發(fā)布

• 生成簽名

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

如果使用 mac，執(zhí)行該命令的目錄隨意附鸽。但一定要保管好自己的 my-release-key.keystore 文件脱拼，如果忘記簽名，不能在原有 App 上面升級坷备，只能重新打包發(fā)布熄浓。同時，不要將 keystore 文件放入版本控制中省撑。

• 設(shè)置 gradle 變量

1）首先將簽名文件 my-release-key.keystore 放在目錄 yourApp/android/app/ 下

2）修改文件 yourApp/android/gradle.properties 添加下面代碼 (替換 ***** 為正確的 keystore 密碼赌蔑、別名俯在、和 key 密碼)：

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

3）添加簽名信息到 app 的 gradle 配置中

編輯文件 yourApp/android/app/build.gradle 加入簽名信息

android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE)
                storePassword MYAPP_RELEASE_STORE_PASSWORD
                keyAlias MYAPP_RELEASE_KEY_ALIAS
                keyPassword MYAPP_RELEASE_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}

• 打包

在終端輸入下面命令

cd android && ./gradlew assembleRelease

等待構(gòu)建完成，便可以在 yourApp/android/app/build/outputs/apk/release/app-release.apk 中找到編譯后的發(fā)布版本娃惯。

NOTE：如果遇到這個錯誤：Execution failed for task ':app:processReleaseResources'跷乐，做下述修改：

在 yourApp/android/gradle.properties 文件最后添加下面代碼：

classpath 'com.android.tools.build:gradle:3.0.0'
distributionUrl=https://services.gradle.org/distributions/gradle-4.1-all.zip
android.enableAapt2=false

如果還有其他問題，可參考下這篇文章：安卓打包發(fā)布那些坑

4.2 iOS 打包發(fā)布

iOS 打包發(fā)布有些麻煩趾浅，對于大多數(shù)非 iOS 開發(fā)者的限制不是 React Native 本身愕提，而是蘋果本身的機(jī)制，比如皿哨，必須要有蘋果開發(fā)者賬號揪荣。iOS 打包發(fā)布打算另寫文章。如果要了解發(fā)布流程往史，可以參考這兩篇文章：iOS 發(fā)布 App Store 詳細(xì)圖文教程，React Native iOS 詳細(xì)打包步驟

注意一點(diǎn)：打包時 --entry-file 安卓佛舱、iOS 是同一個入口文件 index.js椎例，不在區(qū)分安卓/iOS

五 小結(jié)

到目前位置，從改造官方 demo 開始请祖，一個比較完整的 React Native App 完成了订歪，在此基礎(chǔ)上可以不斷擴(kuò)展完善。

當(dāng)然肆捕，從生產(chǎn)角度來說刷晋，這個 demo 的完成度不高，比如慎陵，很多樣式還是最原始的狀態(tài)眼虱、比如 WebView（App 中嵌入 H5）、下拉刷新等也沒有涉及席纽。其中 WebView捏悬、下拉刷新等常用功能會逐步集成到這個 demo 中，但樣式并不打算做過多優(yōu)化润梯，因為從使用角度來講过牙，樣式的完成度越高意味著可定制性越差，并且纺铭，那樣也會導(dǎo)致代碼的可讀性變差寇钉。希望這個 demo 可以成為完整、普適但不臃腫的腳手架舶赔。

不過扫倡，同一套代碼，安卓和 iOS 上展示的樣式會有不同顿痪，針對這個镊辕，會寫文章單獨(dú)說明油够。

參考資料

Choose transition mode for each screen in StackNavigator
React Native 開發(fā)適配心得
Apple Developer - App Icon
在模擬器安卓 4.0 上運(yùn)行正常，在手機(jī)上安卓 6.0 7.0 都閃退 不知道什么情況求解
Issues with resources generated by react in Android Studio 3
React Native 的默認(rèn)單位和自適應(yīng)布局方案