打造ReactNative腳手架工程 - 初始化工程

搭建環境

關於 RN 的環境搭建這裏就不再贅述了。詳情參考官方文檔

新建工程

使用Facebook提供的react-native-cli工具新建工程， 步驟如下：

執行react-native init rndiy，生成空的工程

node_modules安裝成後，提示你運行工程。這裏，我們在 Android、IOS 上都演示下

新建空的 RN 工程就已經完成了, 是不是很簡單。

IOS 配置 Cocoapods 管理工程

1. 爲什麼使用 Cocoapods

Cocoapods是 IOS工程第三方依賴管理工具，類似於 RN裏npm yarn，它能高效的解決添加、移除、升級第三方依賴，使用得當的話對開發極其便利

2. 安裝 Cocoapods

• Mac 打開 終端（Terminal）
• sudo gem update --system, 升級Ruby環境
• gem sources --remove https://rubygems.org/, 移除現有的 Ruby 鏡像
• gem source -a https://gems.ruby-china.org/, 添加 國內鏡像源
• gem sources -l, 查看是否更新成功`
• sudo gem install cocoapods, 現在開始安裝Cocoapods。如果提示沒有權限的話，執行sudo gem install -n /usr/local/bin cocoapods
• pod setup, 至此 Cocoapods 環境搭建完成

3. 使用 Cocoapods

• 進入到rndiy根目錄下，cd ios切換到 IOS 工程下
• pod init, 生成Podfile文件的
• pod install, 安裝

4. 可能遇到的問題：

• NOTE: 執行pod init生成的Podfile文件內容有誤，直接pod install會報錯
  
• NOTE: 切記打開工程方式
  

如果還有不明白的話，查看此 教程

Android 配置 APK 簽名

關於 Apk 簽名一般會由構建環境決定， 也就是說多個構建環境可能配置不同的簽名文件， 也有可能生產環境的簽名文件保存在服務器上，構建的時候下載下來。 我們都知道新建的Android工程只有兩個環境debug和release，一般在開發中這是不滿足的。這裏，我們就根據debug和release環境分別創建不同的簽名文件。

創建簽名文件有兩種方式，我們都來介紹下

1. 利用 Eclipse 生成, JDK 自帶工具 keytool

執行 keytool -genkey -alias rndiy.keystore -keyalg RSA -validity 20000 -keystore rndiy.keystore， 如圖填寫信息

最後，生成 rndiy.keystore 簽名文件

2. 利用 AndroidStudio 生成

打開 AS, 工具欄 Build->Generate Signed Bundle/Apk-> Android App Bundle->Create new,如圖填寫信息

最後，生成 rndiy.jks 簽名文件

關於Android App Bundle和APK簽名的區別，大家有興趣可以參考’Android App Bundle’

以上，就是 Android 兩種簽名文件的實現方式。大家可能奇怪爲什麼簽名文件格式不一致？具體什麼區別還真答不上來。keystore 是 Eclipse 生成的， 而 jks 是 AndroidStudio 生成的，它們都是爲了保證應用的唯一性.

我直接將簽名信息配置在 gradle 中，構建的時候自己去加載簽名文件。 爲了區別 debug 和 release 環境， 我分別採用了不同的簽名文件。這裏將簽名文件參數化，便於查看修改

小提示

• 當初在 git 上創建工程時失誤選擇了錯誤的語言類型，於是找了方法去修改

  1. 在工程根目錄下找到.gitattributesy文件
  2. 添加 *.js linguist-language=javaScript *.css linguist-language=javaScript *.html linguist-language=javaScript，RN 使用 javascript 開發，所以語言選擇 javascript

• 關於加快 Android 構建速度的些許意見
  

• 關於設置屏幕方向，比如豎屏

  1. Android 直接在AndroidMainifest.xml找到對應的 MainActivity，添加android:screenOrientation="portrait"
  2. IOS 找到Device Orientation,只勾選Protrait就可以了.如圖：