自從facebook推出react native 來，越來越多的公司開始使用，但是由于react native 目前不穩(wěn)定，特別是版本迭代速度比較快，造成目前react native的坑比較多，而android由于其開放性，各個(gè)廠商都會進(jìn)行修改，造成Android兼容性問題比較多。而我也加入了react native的大軍中來了，下面就是在項(xiàng)目過程中遇到的坑，后續(xù)會持續(xù)更新：

1.如果采用export default 的方式導(dǎo)出一個(gè)類，引入的時(shí)候，類名前后不不能加{}，加了以后就會包

Super expresstion must either be null or a function ,not undefined

正確引入方式如下：

import RNBaseController from './../base/RNBaseController.js'

export default class RNBaseController extends Component {
}

2.setState使用問題

setState方法是異步的，如果給一個(gè)state變量量賦值后，馬上獲取改變后的值，有可能不不正確。

Paste_Image.png

3.node服務(wù)啟動問題

? 啟動node服務(wù)的時(shí)候，經(jīng)常出現(xiàn)8081端口被占用的問題
? 解決方法：
1.通過 lsof -i: 8081 查看當(dāng)前使?用8081端口的進(jìn)程
2.kill -9 <PID> 殺死使?用8081的進(jìn)程
3.重新啟動node服務(wù)

4.編寫代碼的過程中，經(jīng)常會出現(xiàn)not undefined錯(cuò)誤。較

大一部分原因是自己寫的方法沒有綁定.
解決方法：

<XXView xxxx={this.xxA.bind(this)} />
 在構(gòu)造?方法中，this.xxA = this.xxA.bind(this);
 xxA = () => {}; <XXView xxxx={this.xxA}>//不不能加()
<XXView xxxx={() =>this.xxA()}/>//要加上()

5.setNativeProps

項(xiàng)目中經(jīng)?？吹较旅娴膶懛?將setNativeProps傳遞給子組件):

Paste_Image.png

Paste_Image.png

如果代碼中不不加上述代碼，會出現(xiàn):Touchable child must eitherbe native or forward setNativeProps to a native component.這是因?yàn)槲覀兎庋b的組件(cell)并非直接由原生視圖構(gòu)成，而我們只能給原生視圖設(shè)置相應(yīng)的屬性。如果你通過extends Component 方法?自定義了了一個(gè)組件，直接給它設(shè)置樣式prop是不不會生效的，你得把樣式層層往下傳遞給子組件，知道子組件是一個(gè)能夠直接定義樣式的原生組件。

6.onSubmitEditing

onSubmitEditing的時(shí)候，在Android上調(diào)用2次，在iOS上表現(xiàn)正常。 解決方法：
1.設(shè)置blurOnSubmit={false} 
2.在onSubmitEditing方法中?手動釋放鍵盤dismissKeyboard();

7.頁面跳轉(zhuǎn)卡頓

項(xiàng)目開發(fā)中發(fā)現(xiàn)頁面跳轉(zhuǎn)的時(shí)候會出現(xiàn)卡頓現(xiàn)象，復(fù)雜的頁面表現(xiàn)?比較明顯(Android平臺很容易易出現(xiàn))。因?yàn)閚avigator跳轉(zhuǎn)的時(shí)候?頁?面會多次調(diào)?用render?方法，造成線程阻塞。

解決方法：頁面跳轉(zhuǎn)完成再渲染

Paste_Image.png

減少不不必要的state變量量使用

8.data has been frozen

在rn開發(fā)中，當(dāng)從一個(gè)界面跳轉(zhuǎn)到新的頁面，再通過點(diǎn)擊“返回”按鈕回到原列列表時(shí)，此時(shí)操作界面，使數(shù)據(jù)源的數(shù)據(jù)發(fā)生改變，會出現(xiàn) data has been frozen錯(cuò)誤，原因由于傳遞數(shù)據(jù)是，數(shù)據(jù)源其實(shí)都是操作的同一個(gè)對象。
解決方案：

import _loadsh from ‘lodash'
在跳轉(zhuǎn)頁面之前，需要傳遞參數(shù)的地方，拷貝數(shù)據(jù)
var mParams = _loadsh.cloneDeep(rowData);

9.界面之間的回調(diào)

如果需要從第二個(gè)界面回傳值到前?一個(gè)界面，需要 let _this = this,否則會報(bào)錯(cuò).
因?yàn)榇藭r(shí)this的作用域并不是當(dāng)前的界面，是這個(gè)回調(diào)函數(shù)的域。
解決方案如下：

 _onForward(rowData: Object) {
   var nextRoute = {
  let _this = this;
  var passParams = _this._mutableParams(this.props.params);
  passParams['id'] = rowData['id'];
   const { navigator } = _this.props;
   if(navigator) {
     navigator.push({
       component: ReleaseStripDetail,
       title: 'xxxxxx',
       passProps: {
             'params': passParams,
              refreshData: function(needRefresh:BOOL) {
               if(needRefresh){
                 InteractionManager.runAfterInteractions(()=>{
                   _this._isLoadingShow = true;
                   networkManager.showLoading();
                   _this._retrieveTab('1');
              });
            }
           }
         }
     });
   }
 }

10.ListView使用問題

當(dāng)List數(shù)據(jù)源發(fā)生變化但是，刷新ListView沒反應(yīng)(rowHasChanged方法認(rèn)為r1 仍然等于r2)
此時(shí)其實(shí)就是listview認(rèn)為dataSource 沒變化，此時(shí)就是要重新搞一個(gè)數(shù)組對象就好了。
解決方法：

 var ds = new ListView.DataSource(…);
 dsTmp = ds;
this.setState({dataSource:dsTmp.cloneWithRows
(…)});


或者
  let list = this.props.dataSource.slice(0); //此時(shí)會返回一個(gè)新的數(shù)組。
       this.setState({
        dataSource: ds.cloneWithRows(list),
      });

在使用Navigator的同時(shí)使用ListView或ScrollView，頭部會多出一些空間，automaticallyAdjustContentInsets屬性設(shè)為{false}.

11.報(bào)錯(cuò)：Adjacent JSX elements must be wrapped in an enclosing tag. render方法中必須只能包含一個(gè)根元素。

12.報(bào)錯(cuò)：Invariant Violation: onlyChild must be passed a children with exactly one child。一般是Touchable開頭的幾個(gè)組件，如果沒有子元素或者指定多個(gè)并列列子元素都會報(bào)錯(cuò)。

13. image 設(shè)置src

var localImg = “./images/demo/newsImg2.png”;
require(localImg);//require中的圖片名字必須是一個(gè)靜態(tài)字符串 此處會報(bào)錯(cuò)

14.Unexpected token,expected … ,一般這種情況是程序語法有問題

15.SyntaxError

JSX value should be either an expression or a quoted JSX text (107:22)，JSX語法必須用{}對變量量
進(jìn)行行賦值，如 title = titleName 要換為 title = {titleName}

16.在方法內(nèi)部不不可顯示指定變量量的類型

17.不不要打印console.log(this) ，打印的話界面會很卡

18.inputText ，在android手機(jī)會有默認(rèn)的padding屬性，ios是正常的，所以android 要設(shè)置padding=0.

19 .小米部分手機(jī)不能run service ，進(jìn)入開發(fā)者選項(xiàng)，關(guān)閉米u(yù)i優(yōu)化

20.android 回調(diào) callback.invoke("",jsonArray.toString()); 如果連續(xù)調(diào)用就會報(bào)錯(cuò)。

2110.修改8081默認(rèn)端口號的兩種方式

（1）啟動項(xiàng)目時(shí)react-native start --port 8083

（2）手動修改項(xiàng)目下的node_modules\react-native\local-cli\server\server.js下的方法server.js文件，如下圖所示。

Paste_Image.png