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