最近學(xué)習(xí)了一下facebook出的React Native，本來對這個技術(shù)十分不屑，認(rèn)為最多只會在facebook內(nèi)部流行，但是主導(dǎo)的learn once, write everywhere深深地吸引住了我。
??平常學(xué)習(xí)通?？偨Y(jié)很少，因?yàn)榫W(wǎng)上到處都是資料，需要的時(shí)候查一下就好了，但是React Native尚在成長期，不管是國內(nèi)國外資料文檔都不全，遇到問題的時(shí)候也很難查到想要的資源，所以不得不把我遇到坑總結(jié)一下。
render
React Native整個UI就是一棵Component的樹，在Component生命周期中render作為渲染整個Component的方法，在Component的state發(fā)生改變時(shí)，就會回調(diào)這個方法，重新渲染整個Component。
沒有必要的渲染
TouchableOpacity
一般的 ListView 中每個 Row 的點(diǎn)擊會對應(yīng)一個 onPress 的事件，例如 push 到下一個 View，這種情況使用 onPress={this.handlePress} ，然后在 handlePress里進(jìn)行響應(yīng)的操作就 OK 了。
??在顯示 Github 時(shí)間線的時(shí)候，每個 Row 里會提到多個用戶名和倉庫名，點(diǎn)擊用戶名和倉庫名時(shí)需要做不同的處理。最容易想到的方法就是給 handlePress傳遞參數(shù)了，如果使用下面的代碼：
<View style={styles.action}>
??<Text>{actionDescription}</Text>
??<TouchableOpacity onPress={this.goToUser.bind(this,this.props.data.name)}>
????<Text>data.payload.member.login</Text>
??</TouchableOpacity>
<Text> to </Text>
在執(zhí)行g(shù)oToUser方法后，render會被再次執(zhí)行，因?yàn)镃omponent的state發(fā)生了改變，這樣其實(shí)就在沒有必要的情況下重新渲染了一遍Component，因?yàn)槠鋵?shí)Component的數(shù)據(jù)源其實(shí)并沒有發(fā)生改變。
??解決辦法：
shouldComponentUpdate(nextProps, nextState) {
return nextProps.data !== this.props.data;
}
在shouldComponentUpdate方法中返回Component是夠應(yīng)該被更新。
Navigator
大多數(shù)時(shí)候我們都需要導(dǎo)航器來應(yīng)對不同場景（頁面）間的切換。它通過路由對象來分辨不同的場景，我們這里采用的就是renderScene方法，根據(jù)指定的路由來渲染。
具體的使用方法不再贅述，可以看看官方文檔。
問題所在：
Navigator的動畫是由JavaScript線程所控制的。想象一下“從右邊推入”這個場景的切換：每一幀中，新的場景從右向左移動，從屏幕右邊緣開始（不妨認(rèn)為是320單位寬的的x軸偏移），最終移動到x軸偏移為0的屏幕位置。切換過程中的每一幀，JavaScript線程都需要發(fā)送一個新的x軸偏移量給主線程。如果JavaScript線程卡住了，它就無法處理這項(xiàng)事情，因而這一幀就無法更新，動畫就被卡住了。
解決辦法：
import React, { Component } from 'react';
import {
...
InteractionManager,
} from 'react-native';
componentDidMount(){
InteractionManager.runAfterInteractions(() => {
this.fetchData();
});
}
大概的意思就是等待navigator切換動畫完成后，在執(zhí)行fetchData方法。
ListView
在整個項(xiàng)目中，可能列表是我們最常用的Component，但是ListView是我覺得React Native最坑組件，因?yàn)樗尤粵]有回收機(jī)制，在Xcode中查看Memory，在不斷加載數(shù)據(jù)后，Memory持續(xù)上升。
解決辦法
??react-native-sglistview可能是目前來說相對比較好的解決辦法，只渲染當(dāng)前出現(xiàn)的cell，但是我發(fā)現(xiàn)如果滑動速度比較快的情況下會出現(xiàn)來不及渲染而白屏。
Props
在Component切換或者子Component通常通過props傳值，但是傳入的props值是不允許改變的，如果需要改變傳入值，那你就只能把props值傳入state中，然后在需要Component使用this.state....來獲取該值，在需要update的地方this.setState。
constructor(props){
super(props);
this.state = {
data:props.data,
};
}
numberOfLines
在Text Component中我們可以通過設(shè)置numberOfLines來控制Text展示行數(shù)。以下代碼就是控制Text展示行數(shù)在5行或5行以內(nèi)，如果不設(shè)置numberOfLines，那么Text默認(rèn)有多少展示多少。
<Text numberOfLines={5}>{'在Text Component中我們可以通過設(shè)置numberOfLines來控制Text展示行數(shù)。'}</Text>
有的時(shí)候我們需要進(jìn)行行數(shù)變化切換，就像朋友圈那樣，剛開始是收起來的，點(diǎn)擊展開后，展示全部文字。如果在iOS中直接把numberOfLines直接設(shè)置為0，那么就相當(dāng)于默認(rèn)設(shè)置，展示全部文字，但是在Android中就真的是0行了......
??這里我覺得解決辦法是設(shè)置一個比較大的數(shù)：
var isOpen = true;
this.setState({
??textLine:isOpen?1000:3,
});
<Text numberOfLines={this.state.textLine}>{'在Text Component中我們可以通過設(shè)置numberOfLines來控制Text展示行數(shù)。'}</Text>
不正確的地方還望指正......
持續(xù)更新......
