【react-native】近期作項目の小結

大概20天的時間，我從一個react-native小白開始作一個單詞記憶APP，如今已經完成了過半的內容了，在這其中碰到了不少問題，也慢慢了解熟悉了不少東西，因此我寫下這篇小結來回顧整理一下。

個人機器配置是：
windows 10 64位
紅米note2 安卓5.0

react-native的安裝與調試

關於安裝

大部分的過程幾乎和文檔一致，這裏有要注意的地方就是：

1. 必須安裝python 2版本，版本高的不支持。
2. 安裝C++編譯組件，下載VS2015/VS2013能解決問題。
3. node.js和npm的路徑必需要全英文。
4. 最好以管理員權限運行cmd來npm install安裝項目依賴。

另外，由於我用的小米手機，必需要修改項目默認的幾個點才能成功運行項目:

1. 手機要關閉MIUI優化。

2. 項目安卓目錄下：build.gradle文件部分改成以下

   dependencies {
          classpath 'com.android.tools.build:gradle:1.2.3'
   }

3. 項目安卓目錄下：gradle/wrapper/gradle-wrapper文件的版本更改成gradle-2.4-all.zip。

第一次在真機中啓動項目調試的時候，由於要下載gradle包因此可能會等待好久，它會根據上面的配置去下載對應的包在項目中。
另外手機中，若是出現項目沒法載入的狀況，須要手動搖動手機，選擇Dev Settings-> Debug sever host & port for device，輸入本機的ip:端口號（react-native默認是8081），再退出程序從新載入就能夠了。

關於刷新和調試

刷新編譯
每次react-native項目的啓動時間都大概在1min左右，有點長，若是想要減小時間，能夠直接在手機中搖動彈出菜單，選擇reload，會從新編譯更新。
若是不想手動載入，能夠選擇菜單中的Enable Hot Reloading開啓熱更新，即當代碼發生改變系統會自動更新，可是這樣也容易出現錯誤,若是是寫循環的狀況下還可能會卡死。

調試
1.打開另外一個窗口，進入項目地址，輸入react-native log-android，能夠對控制檯進行監控。
2.搖晃手機出現菜單，能夠選擇在Chrome中進行調試，瀏覽器會自動彈出一個頁面，而後能夠在控制檯進行監控。

react-navigation

官方的Navigator組件已被拋棄，目前市面上最經常使用的就是react-navigation和react-native-router-flux。個人項目中選用了react-navigation，不過react-navigation的官方文檔能夠說是很是簡潔了，一不留神就出BUG了。

需求一：底部導航欄
使用react-navigation中的TabNavigator。

• 默認狀況下是頂部的tabBar，要引入TabBarBottom。
• 我在出口的文件中部署了整個項目的頁面，我看不少人都是直接在這裏也順便把tabBarIcon也自定義渲染更新，可是運行項目的時候老是出錯。後來試了不少次解決方法是把Icon放入單個頁面的navigationOptions去渲染。
• 安卓默認狀況下是不渲染圖標，須要在tabBarOptions中設置showIcon爲true。

如何自定義圖標導航？
能夠本身封裝一個組件，TabNavigator提供tintColor和focused屬性，可讓你去判斷選中狀態來更改。

tabBarIcon: ({tintColor,focused}) => ( //你的代碼 )

需求二：記錄全部的頁面，支持跳轉
使用react-navigation中的StackNavigator。
StackNavigator記錄的頁面都會有一個頭部來代表這個頁面的信息。
在總的出口文件中記錄下全部的頁面，取好名字，直接接觸的頁面都會被傳入一個navigation，利用這個navigation就能夠完成頁面的跳轉。

頁面修改頭部導航？

• 若是不想要這個導航，能夠在那個頁面的navigationOptions中寫下header:null。
• 設置headerLeft和headerRight能夠修改頭部左右的按鈕，不要就寫null。
• 文字不居中，是由於要不左右都得沒按鈕，要不都得有，能夠放一個空按鈕佔位置。
• 消除導航陰影，在headerStyle中寫：elevation: 0。
• 想要使用navigation，就寫成函數形式：static navigationOptions = ({ navigation}) => ({})
• 想要向其中傳入參數，須要在componentDidMount()中使用 this.props.navigation.setParams傳入參數，而後調用[navigation.state.params.參數名]就能夠用到，可是必須先判斷navigation.state.params是否存在，不然會報錯。可能一開始尚未傳入參數但界面已經被渲染出來，若參數被更新了數據就會被從新渲染出來。（我這裏還碰到了頁面卡死的狀況，目前緣由還不明確）

需求三：歡迎頁面事後，不能返回
由於StackNavigator會記下上個通過的頁面，若是不但願它保留狀態，就不能使用navigate而是使用reset重置記憶，詳情請看官方文檔。

需求四：在子組件中能使用react-navigation的API
只要把navigation傳遞給子組件就能夠了，而後調用this.props.navigation。

需求五：在StackNavigator中鑲嵌TabNavigator
也就是在一個頁面中，通常可能出現頭部的選擇來切換幾個頁面。
這種狀況下咱們須要多設置一個wrapper頁面，把這個頁面記錄在出口的頁面中。這個頁面要渲染一個tabNavigator，包裹起來。
須要注意的就是在wrapper頁面中，除了要傳遞navigation外，要把tab的router給wrapper頁面，不然會報錯：
Wrapper.router = Screen.router;

mobx

用於管理數據的一個小工具，很容易入手。
必需要安裝解析ES7的工具來解析裝飾模式，在項目的.babelrc中寫入"plugins": ["transform-decorators-legacy"]，而且安裝

npm install babel-plugin-transform-decorators-legacy --save-dev

還要安裝

npm install babel-preset-stage-1

由於編譯器默認狀況下並不會開啓ES7支持模式。
在出口文件中想要調用Provider來注入全部的數據，請使用class來包裹，不要定義const來return。
另外在須要數據的類前加上@inject('rootStore')和@observer，這樣類裏面就能夠直接調用this.props.rootStore來獲取數據了。

其餘組件

react-native-sound
播放的聲音組件，mp3和wav格式都支持，網絡連接的音頻也支持。可是文件名必需要全小寫。還有一個容易出錯的地方就是聲音載入的代碼應該寫在class前面，異步進行的動做，很容易出現聲音未載入完就去播放聲音，因而就出錯了。

react-native-root-toast
https://github.com/magicismig...
一款簡單的黑色透明提示toast，不過若是是想點擊調用，就只能使用定義變量的那種方法，另外一種在ComponetDidMount()中調用的是界面一渲染成功就顯示的狀況。網上還有一個react-native-easy-toast，可是不知道爲何用那個在手機上運行時一直出現不了效果，因此棄用了。

react-native-flexi-radio-button
radio組件，使用很簡單，可是有個缺點就是在手機上看的時候有鋸齒，不知道有沒有解決的方法？要指定默認的值，使用selectedIndex屬性。

react-native-popup-dialog
是一個彈出框組件，挺好看的，可是它只能渲染到所在組件的大小，並且和ScrollView一塊兒出現的時候，它渲染出來的大小隻能遮住一個屏幕，我還在尋找看看有沒有解決的方法。

其餘思考

這些日子，個人進度其實仍是挺慢的，由於我遇到了不少本身不太知道緣由的問題，出錯的代碼指示都不精確。身邊也沒有什麼前輩，因此一方面除了上網搜索也沒什麼特別的解決方法，不事後來我加了一個羣，你們在裏面的討論氣氛都很好，雖然本身的大部分問題也沒人能幫我T-T，不過也算是有個安慰吧。我以爲仍是不能急，要想辦法縮小問題出錯的範圍，就算用最笨的方法也能作到這點。若是實在是解決不了的小問題能夠先放着，把重要的工做作完了再來查漏補缺。