這部分在android下無效…… ，個人是win，所以後面沒有展示效果圖，有mac的可以嘗試下效果

1.1 修改 StackNavigator API

需要注意的是如果頁面進入方式為 modal，需要自定義 header，因為預設 header 樣式失效，都疊在一塊了。（還沒有實際遇到，先mark著）

關於card和modal，個人還並不是很理解，後續理解了再補上

1.2 頁面中呼叫

/**
 * ScreenSome2/view.js
 * 自定義 header（關閉按鈕）
 */
import React from 'react';
import { TouchableHighlight,Text,View } from 'react-native'
import pxToDp from '../../config/pxToDp';

<View>
  <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) }}>關閉</Text>
  </TouchableHighlight>

  <Text style={{ fontSize: pxToDp(36) }}>some2，以 modal 的形式進入</Text>
</View>複製程式碼

/**
 * ScreenSome2/view.js
 * 自定義 header（關閉按鈕）
 */
import React from 'react';
import { TouchableHighlight,Text,View } from 'react-native'
import pxToDp from '../../config/pxToDp';

export default self => (
  <View>
    <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) }}>關閉</Text>
    </TouchableHighlight>

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

);複製程式碼

為了看起來稍微好看點，加了一點樣式，不加也可以。style.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  buttonContainer: {
    margin: 20
  },
});複製程式碼

別忘了在route裡配置新的路由，完整程式碼如下：

// 引入依賴
import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation'

// 引入頁面元件
import ScreenBottomTab from '../screens/ScreenBottomTab';
import ScreenHome from '../screens/ScreenHome';
import ScreenSome1 from '../screens/ScreenSome1';
import ScreenSome2 from '../screens/ScreenSome2';
import ScreenTab1 from '../screens/ScreenTab1';
import ScreenTab2 from '../screens/ScreenTab2';
import ScreenTab3 from '../screens/ScreenTab3';

/**
 * 自定義 StackNavigator，可以選擇 screen 進入方式
 * 預設狀態為 card，只需要輸入對應頁面，比如 ..navigate('ScreenSome1')
 * 如果要使某個頁面進入方式為 modal 只需要在路徑上加上 Modal
 * 比如：..navigate('ScreenSome2Modal')
 */
const StackModalNavigator = (routeConfigs, navigatorConfig) => {
  const CardStackNavigator = createStackNavigator(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 = createStackNavigator(
    {
      CardStackNavigator: { screen: CardStackNavigator },
      ...modalRouteConfig,
    },
    {
      // 如果頁面進入方式為 modal，需要自定義 header（預設 header 樣式失效，都疊在一塊了）
      mode: 'modal',
      headerMode: 'none',
    },
  );

  return ModalStackNavigator;
};


// 配置路由
const AppNavigator = StackModalNavigator({
  ScreenBottomTab: ScreenBottomTab,
  //下面幾個配置的是測試Navigator不同使用場景用，只需要tab的話，只要ScreenBottomTab: ScreenBottomTab即可
  ScreenHome: ScreenHome, 
  ScreenSome1: ScreenSome1,
  ScreenSome2: ScreenSome2,
  ScreenTab1: ScreenTab1,
  ScreenTab2: ScreenTab2,
  ScreenTab3: ScreenTab3,
});
const App = createAppContainer(AppNavigator)
export default App
複製程式碼

this.props.navigation有很多方法，demo中(ScreenHome,ScreenSome1)只用到.navigate，.push，.goBack，具體可參考https://reactnavigation.org/docs/zh-Hans/navigation-prop.html

二 自適應

自適應主要包括兩方面：尺寸根據螢幕大小自適應，包括 fontSize，width 等；圖片解析度根據螢幕解析度自適應，也就常說的二倍圖、三倍圖等。

2.1 尺寸自適應

copy自@L小庸的程式碼片段

尺寸自適應的原理是通過獲取手機螢幕的寬度，尺寸做相應比例的調整，為此封裝了一個工具函式，放在了 config/pxToDp.js 中。

• config/pxToDp.js 尺寸轉換的工具函式

/**
 * 自適應佈局
 * @param uiElementPx: ui給的原始尺寸
 */
import { Dimensions, Platform } from 'react-native';

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

// UI 預設給圖是 750
const uiWidthPx = 750;

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

  if (transferNumb >= 1) {
    // 避免出現迴圈小數
    return Math.ceil(transferNumb);
  } else if (Platform.OS === 'android') {
    // 如果是安卓，最小為1，避免邊框出現鋸齒
    return 1;
  }
  return 0.5;
}

export default pxToDp;
複製程式碼

實際上，通過 Dimensions.get('window').width 獲取的螢幕寬度和自己想象的可能有出入，比如，iphone7 螢幕 4.7''，獲取到的寬度是 375，華為 P9 是 5.2'，但獲取到的寬度卻是是 360！有點坑，這個工具函式還有待優化。個人還沒有遇到這麼多場景，也還沒有更好的方案，如果踩坑，後續更新。

# 一張圖片提供 3個尺寸

test.png # 尺寸 40 x 40
test@2x.png # 尺寸 80 x 80
test@3x.png # 尺寸 120 x 120複製程式碼

name@nx是 n (n > 1) 倍圖命名規範，React Native 也是根據命名判斷圖片尺寸的。

/**
 * ScreenTab3/view.js
 */

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

三 修改桌面圖示、App 展示名稱，設定啟動頁

修改桌面圖示、App 展示名稱相對簡單，設定啟動頁稍微麻煩。

IOS的設定並沒有mac去嘗試，可參考@L小庸的https://juejin.im/post/5a9602c45188257a7262e3fb嘗試，

踩坑：開發要連真機除錯，尤其是涉及原生功能的部分，切記。

3.1 設定桌面圖示

IOS的參考@L小庸的https://juejin.im/post/5a9602c45188257a7262e3fb嘗試

<resources>
    <string name="app_name">你的app名稱</string>
</resources>
複製程式碼複製程式碼

安卓的話，還要修改預設包名（applicationId），如果不修改，如果系統監測到當前應用的 applicationId 和已安裝的某個應用相同而簽名不同，會報錯：“簽名不一致 該應用可能已被惡意篡改”。

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

// ...

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

// ...複製程式碼

3.3 設定啟動頁

這裡使用了第三方外掛react-native-splash-screen，官網教程已經很詳細，這裡做簡要介紹。

• 專案中安裝依賴

1）下載依賴

yarn add react-native-splash-screen複製程式碼

2）新增到專案中

react-native link react-native-splash-screen複製程式碼

3）在 React Native 配置

這裡指的是設定啟動頁什麼時候消失，下面的程式碼是首頁載入完 5s 後啟動頁消失。

export default class ScreenHome extends Component {
  // ...other code
  componentDidMount() {
    // 隱藏啟動頁，如果不設定消失時間，在元件載入完啟動頁自動隱藏
    setTimeout(() => {
      SplashScreen.hide();
    }, 5000);
  }
  // ...other code
}複製程式碼

• iOS 設定參考@L小庸的https://juejin.im/post/5a9602c45188257a7262e3fb嘗試
• 安卓配置

      1）更新 MainActivity.java(yourApp/android/app/src/main/java/com/yourApp/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 中建立 launch_screen.xml（如果沒有 layout 目錄，新建），內容如下：

<?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）準備不同尺寸的啟動頁圖片並放到專案中

安卓是通過資料夾路徑尋找啟動頁面的，所以，多張尺寸的啟動頁名稱相同，都為 launch_screen.png，但要放在不同資料夾中，資料夾放置目錄為 yourApp/android/app/src/main/res/，名稱及對應放置的圖片尺寸如下：

檔案必須是 png 格式的圖片,開始隨便找了一張圖片，結果打包各種報錯，命名需對應尺寸

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

5）解決安卓 6.0，7.0 安裝配置完成後出現閃退，參考下面設定：（copy，踩坑填坑）

<?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>複製程式碼

3.4 最終效果圖

設定完桌面圖示、修改 APP 展示名稱及設定啟動頁之後的效果圖如下：

demo裡後續新增了自己練習的部分，所以效果圖和程式碼稍有差別，需要的只用care文章裡的步驟就好

四 打包釋出

4.1 安卓打包釋出

• 生成簽名

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

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複製程式碼

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