react native筆記

參考資料：

• react native中文教程
• https://www.jb51.net/article/92931.htm
• 【React Native入門系列文章 六】實戰寫一個電影列表頁
• React Navigation

Android環境搭建

開發依賴安裝

• Node：^6.0、React Native 命令行工具、
• Python2
• Java SE Development Kit(JDK): 1.8
• Andriod Studio

注意：要配置python、java和Android的系統環境變量。

# 安裝react-native-cli命令行工具
npm install -g yarn react-native-cli
# 配置yarn
yarn config set registry https://registry.npm.taobao.org  --global yarn config set disturl https://npm.taobao.org/dist  --global

安裝Android SDK

在 SDK Manager 中選擇”SDK Platforms”選項卡，然后在右下角勾選”Show Package Details”。展開Android 6.0 (Marshmallow)選項，確保勾選了下面這些組件（重申你必須使用穩定的翻墻工具，否則可能都看不到這個界面）：

• Android SDK Platform 23
• Intel x86 Atom_64 System Image（官方模擬器鏡像文件，使用非官方模擬器不需要安裝此組件）

然后點擊”SDK Tools”選項卡，同樣勾中右下角的”Show Package Details”。展開”Android SDK Build-Tools”選項，確保選中了 React Native 所必須的23.0.1版本。你可以同時安裝多個其他版本，然后還要勾選最底部的Android Support Repository。

最后點擊”Apply”來下載和安裝這些組件。

解決https://maven.google.com 連接不上

參考自： https://maven.google.com 連接不上的解決辦法

直接替換android目錄下的build.gradle中的 https://maven.google.com 為 https://dl.google.com/dl/android/maven2/

創建項目并運行

react-native init projectName
cd projectName
react-native run-android
react-native run-ios

問題解決

參考自：

• React-Native Android真機測試 -unable to load script from assets ‘index.android bundle’…
• Unable to resolve module ‘AccessibilityInfo’, when trying to create release bundle
• Error calling AppRegistry.runApplication
• ReactNative踩坑之旅: Unable to resolve module 和 Error: Plugin
• React Native開發錯誤警告處理總結（已解決 ！持續更新）
• React Native 錯誤解決記錄

錯誤1：unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or you’re runing a packager server

解決辦法

1，在 android/app/src/main 目錄下創建一個 assets空文件夾

2，在項目根目錄運行

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

運行完畢后assets文件夾下會多出index.android.bundle和index.android.bundle.meta兩個文件

新版中index.android.js跟index.ios.js已經合并為index.js

3，重新react-native run-android

錯誤原因：index.android.bundle是用來調用原生控件的js腳本，每次當改變了 index.js，都需要使用上面的代碼片段，來及時的更新index.android.bundle，然后打包才可以把新的index.js應用上，所以當沒有index.android.bundle文件時，React-Native 項目是無法運行的。

4, 如果你運行第2步中的react-native bundle...命令報錯提示Unable to resolve module ‘AccessibilityInfo’。具體報錯信息如下：

Unable to resolve module `AccessibilityInfo` from `xxx\node_modules\react-native\Libraries\
react-native\react-native-implementation.js`: Module does not exist in the module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf $TMPDIR/react-*` or `npm start -- --reset-cache`.
  4. Remove haste cache: `rm -rf $TMPDIR/haste-map-react-native-packager-*`.

從上可知，將0.56的react-native降級到0.55.4就可以解決問題了。

注意：一定要使用npm install去安裝依賴，用cnpm install安裝的可能是舊的模塊，會導致出錯。

5，如果第4步中你只是單純的將react-native降級到0.55.4，其他依賴沒有更新或安裝的話，則會出現如下報錯：

Module build failed: Error: Plugin 0 specified in “base” … provided an invalid property of “default”

是在babel-preset-react-native包里的文件錯誤, 看了下那個文件, 沒有那幾行代碼。

解決方法：更新babel-preset-react-native

npm uninstall --save babel-preset-react-native
npm install --save babel-preset-react-native@4.0.0

錯誤2：Error calling AppRegistry.runApplication

錯誤原因：

• 8081端口被其他進程占用——將占用8081端口的進程殺死，重新運行react-native run-android，啟動Node服務端。
• 客戶端無法訪問服務端

在模擬器中按下CTRL+M，配置開發地址為localhost:8081

真機則搖一搖手機，喚出菜單，Dev Settings -> Debug server host & port for device，輸入主機ip:8081 (手機和電腦必須連接相同的wifi)

重新運行react-native run-android

修改8081默認端口號的兩種方式

（1）啟動項目時react-native start –port 8083
（2）手動修改項目下的node_modules\react-native\local-cli\server\server.js下的方法server.js文件，如下圖所示。

實戰：電影列表

demo地址

登錄認證

示例通過react-navigator來進行路由跳轉。首先通過判斷是否登錄，來決定進入的頁面。

const Root = createSwitchNavigator(
    {
        AuthLoading: AuthLoadingScreen,
        App: AppStack,
        Auth: AuthStack,
    },
    {
        initialRouteName: 'AuthLoading',// the default router
    }
);

使用createSwitchNavigator可以保證進入從Auth路由進入到App路由時，Auth路由被銷毀，這樣，用戶就無法退回到Auth頁面了。

登錄頁面如下圖所示：

注意：

1、<TextInput>組件在React Native中，默認是帶一條橫線的，如果想去掉輸入框下面的橫線，需要給<TextInput>指定一個underlineColorAndroid='transparent'，這樣就可以去掉輸入框下面的橫線了；

2、密碼輸入框需要指定屬性：secureTextEntry={true}

3、要顯示圖片，必須為<Image>標簽指定寬度和高度，和Android中不同的是，<Image>沒法自動調整圖片的大小，沒有類似Android中的wrap_content。

電影列表展示

下拉刷新會去請求接口，獲取最新的數據。點擊某部電影，可以進入詳情頁面。