多國語系 - 使用多個字串檔案

如何設定在 react native app 中使用多國語系，請參考
支援多國語系

根據 react-native-i18n 的程式碼，在引用 react-native-i18n 模組後我們可以自訂不同語系的內容，例如
當載具的語系是 'en' 的時候，'welcome' 會顯示為 'Welcome'，而當語系切換成 'zh' 的時候，'welcome'就會變成 '歡迎'

如果需要支援較多內容或語系，如果能將各個語系分存在不同的檔案，在架構與管理上比較清楚容易。我們可以自訂語系目錄如下

其中 en 與 tw 目錄下的 strings.js 分別存放對應的語系字串
把上述程式碼改寫成
之後如果有新增的字串，就可以在個別的檔案內新增

支援多國語系

React Native : 0.42

結果預覽

在 react native app 中需要支援多國語系，我們可以引用 react-native-i18n 模組。

第一步：安裝模組
開啟終端機，移到專案目錄後執行下列指令

   npm install react-native-i18n --save   

第二步：連結函式庫
執行指令

   react-native link   

雖然 react-native-i18n 的作者有提到可以使用上述方式自動連結函式庫，但是經過實際測試發現 iOS 不可使用 (android 可以)，所以必須要透過手動的方式加入函式庫

步驟 2.1 打開專案
開啟專案目錄下 /ios/專案.xcodeproj

步驟 2.2 指定函式庫
如果有執行過 react-native link，在專案的 Libraries 目錄應該可以看到 RNI18n.xcodeproj 這個函式庫目錄，我們需要引用 libRNI18n.a。點選專案內的 Build Phases 底下的 Link Binary With Libraries，把 libRNI18n.a拉進來

＊如果沒有執行過 react-native link，在 Libraries 目錄底下會看不到 RNI18n.xcodeproj，這時候，你可以直接把 RNI18n.xcodeproj 拉到 Libraries 底下。RNI18n.xcodeproj 的位置在 專案 / node_modules / react-native-i18n

第三步：測試
完成上述步驟後，我們就可以開始使用 i18n 模組

最簡易的測試方法：
ReactNativeI18n.locale 會顯示目前載具所使用的語系，例如 en 或 zh-Hants


完整的專案已放到 Git 上
前往 Git 專案

how to accept Http url in iOS app

Since iOS 9, http url will be rejected in iOS App as default. Of course, it relates security issues

What is App Transport Security (ATS)?

In order to support http url in iOS, it must modify plist files in iOS project.

If you utilize react-native CLI to create project, you can find a folder 'ios' under created project

where 'reactNavSample' is project name. If you want to active http url, open Info.plist and find NSAppTransportSecurity key then add 

  <key>NSAllowsArbitraryLoads</key>   
  <true>   

* adding NSAppTransportSecurity represents that all domains are allowed to access

If you don't want to allow all domains access, you can also specify specific domain. For example, you can enable http://localhost by adding

   <key>localhost</key>   
   <dict>    
      <key>NSExceptionAllowsInsecureHTTPLoads</key>   
   </dict>   

* If you specify specific domain, it might be a problem if the domain links resources from the others. For example, if you allow abc.com domain, it will be find when you access http://abc.com. However, if abc.com links resources come from def.com, it might be a problem. The key issue is, you will never know whether abc.com links resources come from others, def.com? ghi.com? or jkl.com?

how to open android emulator manually

Android emulator is required when developing react-native. In this article, we will discuss how to open android emulator manually.

You can refer installation process described by react as following
https://facebook.github.io/react-native/docs/getting-started.html

It mentions that emulator manager can be invoked by

   android avb  

However, it is unavailable for newly version of Android Studio and it shows

What happen if we ignore the above and execute react-native run-android ?

No doubt, errors show to break my heart. React tells you that running android emulator is required for running react-native android app.

In order to solve the problem, you have to find android first. In mac, it would be

   ~/Library/Android/sdk/tools   

then run 

   emulator -list-avds   

If you have completed installation process of android studio and configured emulator properly, you will show available device name.

* If it does not display any device, you must config emulator device from android studio

next run
    emulator -avd <device name>    

Please replace <device name> as your available devices, for example
     emulator -avd Nexus_5_API_25    

then, emulator will be invoked

After booting, you can run react-native app by executing
    react-native run-andriod    

* about :app:installDebug FAILED, please check whether VM is running in your environment such as Docker. Before you start android emulator, please stop those VMs

如何使 ios app 接受 http url

iOS 9 之後，iOS app 已經預設不支援開頭為 http 的 url。這牽扯到一些安全性的考量，可參考下列文章
What is App Transport Security (ATS)?

雖然目前很多網站都支援 Https，但是難免會遇到一些不支援的情況。這時候我們需要去更改 iOS app 專案的設定來允許接受 http url。

若是使用 react-native CLI 產生專案，我們可以在 ios 目錄下找到 ios 專案相關的設定

reactNavSample 是 CLI 的專案名稱，若要支援 http url，請打開 Info.plist 找到 NSAppTransportSecurity 值加入

  <key>NSAllowsArbitraryLoads</key>   
  <true>   

便可支援 http url

＊請注意 NSAllowsArbitraryLoads 會允許所有的網域，如果你只是想支援部分的網域請在 NSExceptionDomains 中增加允許的網域

例如允許 localhost 請加入
   <key>localhost</key>   
   <dict>    
      <key>NSExceptionAllowsInsecureHTTPLoads</key>   
   </dict>   

＊在指定網域的情況下，如果該網域有使用到其他網域的資源，而在plist中並未指定就會發生無法存取的狀況。舉個例子

假設在plist中你指定支援 abc.com ，當app去存取 http://abc.com 底下資源的時候一切正常。但假設 abc.com 中有用到 def.com 的資源的時候，存取就會發生問題

如何開啟 Android 模擬器

開發 React-native 會需要用到 android 模擬器，安裝步驟可參考
https://facebook.github.io/react-native/docs/getting-started.html

文中有提到可以以下列指令啟動模擬器管理員

  android avd    

不過，新版的 android studio 安裝完成之後，已不支援。如果執行上述指令會看到

如果忽略上面的步驟，直接透過 CLI (react-native run-android) 執行 android app

react-native 會提示你必須要執行 android 模擬器

解決上述問題，請先找到 android sdk 安裝位置，在mac的位置是

   ~/Library/Android/sdk/tools     

先執行

   emulator -list-avds     

如果可以看到裝置名稱表示有可用的裝置，如果沒有請開啟 android studio 新增一個模擬器

再執行

   emulator -avd <裝置名稱>     

請將 <裝置名稱> 置換成可用的裝置名稱，例如

   emulator -avd Nexus_5_API_25     

如果一切順利的話，android 模擬器就會開始運行

完成開機後就可以直行 react-native run-android 測試 react-native app

＊:app:installDebug FAILED ：當模擬器無法開啟時，請確認是否有其他VM正在執行。例如 Docker，請先關閉其他VM後再執行 android 模擬器