自從facebook推出react native 來，越來越多的公司開始使用，但是由于react native 目前不穩(wěn)定，特別是版本迭代速度比較快，造成目前react native的坑比較多，而android由于其開放性，各個廠商都會進行修改，造成Android兼容性問題比較多。而我也加入了react native的大軍中來了，下面就是在項目過程中遇到的坑，后續(xù)會持續(xù)更新：
1.如果采用export default 的方式導(dǎo)出一個類，引入的時候，類名前后不不能加{}，加了以后就會包
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方法是異步的，如果給一個state變量量賦值后，馬上獲取改變后的值，有可能不不正確。
3.node服務(wù)啟動問題
? 啟動node服務(wù)的時候，經(jīng)常出現(xiàn)8081端口被占用的問題
? 解決方法：
1.通過 lsof -i: 8081 查看當前使?用8081端口的進程
2.kill -9 <PID> 殺死使?用8081的進程
3.重新啟動node服務(wù)
4.編寫代碼的過程中，經(jīng)常會出現(xiàn)not undefined錯誤。較
大一部分原因是自己寫的方法沒有綁定.
解決方法：
<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
項目中經(jīng)常看到下面的寫法(將setNativeProps傳遞給子組件):
如果代碼中不不加上述代碼，會出現(xiàn):Touchable child must eitherbe native or forward setNativeProps to a native component.這是因為我們封裝的組件(cell)并非直接由原生視圖構(gòu)成，而我們只能給原生視圖設(shè)置相應(yīng)的屬性。如果你通過extends Component 方法?自定義了了一個組件，直接給它設(shè)置樣式prop是不不會生效的，你得把樣式層層往下傳遞給子組件，知道子組件是一個能夠直接定義樣式的原生組件。
6.onSubmitEditing
onSubmitEditing的時候，在Android上調(diào)用2次，在iOS上表現(xiàn)正常。 解決方法：
1.設(shè)置blurOnSubmit={false}
2.在onSubmitEditing方法中?手動釋放鍵盤dismissKeyboard();
7.頁面跳轉(zhuǎn)卡頓
項目開發(fā)中發(fā)現(xiàn)頁面跳轉(zhuǎn)的時候會出現(xiàn)卡頓現(xiàn)象，復(fù)雜的頁面表現(xiàn)?比較明顯(Android平臺很容易易出現(xiàn))。因為navigator跳轉(zhuǎn)的時候?頁?面會多次調(diào)?用render?方法，造成線程阻塞。
解決方法：頁面跳轉(zhuǎn)完成再渲染
減少不不必要的state變量量使用
8.data has been frozen
在rn開發(fā)中，當從一個界面跳轉(zhuǎn)到新的頁面，再通過點擊“返回”按鈕回到原列列表時，此時操作界面，使數(shù)據(jù)源的數(shù)據(jù)發(fā)生改變，會出現(xiàn) data has been frozen錯誤，原因由于傳遞數(shù)據(jù)是，數(shù)據(jù)源其實都是操作的同一個對象。
解決方案：
import _loadsh from ‘lodash'
在跳轉(zhuǎn)頁面之前，需要傳遞參數(shù)的地方，拷貝數(shù)據(jù)
var mParams = _loadsh.cloneDeep(rowData);
9.界面之間的回調(diào)
如果需要從第二個界面回傳值到前?一個界面，需要 let _this = this,否則會報錯.
因為此時this的作用域并不是當前的界面，是這個回調(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使用問題
當List數(shù)據(jù)源發(fā)生變化但是，刷新ListView沒反應(yīng)(rowHasChanged方法認為r1 仍然等于r2)
此時其實就是listview認為dataSource 沒變化，此時就是要重新搞一個數(shù)組對象就好了。
解決方法：
var ds = new ListView.DataSource(…);
dsTmp = ds;
this.setState({dataSource:dsTmp.cloneWithRows
(…)});
或者
let list = this.props.dataSource.slice(0); //此時會返回一個新的數(shù)組。
this.setState({
dataSource: ds.cloneWithRows(list),
});
在使用Navigator的同時使用ListView或ScrollView，頭部會多出一些空間，automaticallyAdjustContentInsets屬性設(shè)為{false}.
11.報錯：Adjacent JSX elements must be wrapped in an enclosing tag. render方法中必須只能包含一個根元素。
12.報錯：Invariant Violation: onlyChild must be passed a children with exactly one child。一般是Touchable開頭的幾個組件，如果沒有子元素或者指定多個并列列子元素都會報錯。
13. image 設(shè)置src
var localImg = “./images/demo/newsImg2.png”;
require(localImg);//require中的圖片名字必須是一個靜態(tài)字符串 此處會報錯
14.Unexpected token,expected … ,一般這種情況是程序語法有問題
15.SyntaxError
JSX value should be either an expression or a quoted JSX text (107:22)，JSX語法必須用{}對變量量
進行行賦值，如 title = titleName 要換為 title = {titleName}
16.在方法內(nèi)部不不可顯示指定變量量的類型
17.不不要打印console.log(this) ，打印的話界面會很卡
18.inputText ，在android手機會有默認的padding屬性，ios是正常的，所以android 要設(shè)置padding=0.
19 .小米部分手機不能run service ，進入開發(fā)者選項，關(guān)閉米ui優(yōu)化
20.android 回調(diào) callback.invoke("",jsonArray.toString()); 如果連續(xù)調(diào)用就會報錯。
2110.修改8081默認端口號的兩種方式
（1）啟動項目時react-native start --port 8083
（2）手動修改項目下的node_modules\react-native\local-cli\server\server.js下的方法server.js文件，如下圖所示。
