React Native 采坑集合

自從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變量量賦值后,馬上獲取改變后的值,有可能不不正確。

Paste_Image.png
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傳遞給子組件):

Paste_Image.png
Paste_Image.png

如果代碼中不不加上述代碼,會出現: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?方法,造成線程阻塞。

解決方法:頁面跳轉完成再渲染

Paste_Image.png

減少不不必要的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文件,如下圖所示。

Paste_Image.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,517評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,087評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 177,521評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,493評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,207評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,603評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,624評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,813評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,364評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,110評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,305評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,874評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,532評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,953評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,209評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,033評論 3 396
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,268評論 2 375

推薦閱讀更多精彩內容