2016年7月ReactNative跳坑記錄
1.添加組件屬性嘶摊，有一個地方需要注意蛹批，就是class屬性需要寫成 className 舟陆，for 屬性需要寫成 htmlFor 矾屯，這是因為 class 和 for 是 JavaScript 的保留字。
2.在genymotion上進行模擬的時候呀袱，一定要關(guān)閉電腦的防火墻贸毕，并且要把手機的wifi連上 （好像5.0以上的版本不會自動連接wifi），將模擬器的ip和端口設(shè)置為可訪問本機的ip（10.0.3.2:8081）夜赵，如果是在手機上的話明棍，也是可以打開網(wǎng)頁嘗試是否可以訪問，可以訪問后再將ip添加進genymotion的設(shè)置里面寇僧。
3.React Native的打包器會首先尋找File.<platform>.js文件摊腋，然后再去尋找 File.js 。這就允許我們將Android平臺的代碼放置到 File.android.js , iOS 的放入到 File.ios.js , 以及Web平臺的代碼放入到 File.js, 而不需要改變導(dǎo)入的聲明 ./File嘁傀。
4.在ES6中兴蒸，變量的解構(gòu)賦值用途很多,交換變量的值可以用這個奇妙的方法[x, y] = [y, x]。
5.當(dāng)你Image加載一個網(wǎng)絡(luò)圖片時细办，如果你不給該Image設(shè)置width和height橙凳，那你將什么都看不到。這還不算笑撞，當(dāng)你使用ListView時如果該組件同時存在一個兄弟元素岛啸，那么此時ListView必須設(shè)置height，否則你會發(fā)現(xiàn)它不再響應(yīng)用戶的滾動操作茴肥。坚踩。。這個地方所說的width和height是指的在style屬性中設(shè)置的值炉爆，如果直接設(shè)置height屬性的話是不會起作用的堕虹。
6.使用fetch時，當(dāng)你試圖提交附件表單數(shù)據(jù)的時候芬首，請一定要使用FormData對象將數(shù)據(jù)包裹如果你只是普通的json提交赴捞，就按照官方例子來做：
fetch(API_LOGIN_URL, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
account: this.state.account,
password: this.state.password
})
});
7.FB提供了Dimensions組件可以用來獲取屏幕的當(dāng)前尺寸：
var deviceHeight = Dimensions.get('window').height;
var deviceWidth = Dimensions.get('window').width;
8.當(dāng)你打算在某個控件上套用設(shè)置好的某個樣式，但需要單獨為其設(shè)置一個額外特殊值時郁稍，你可以這樣：<View style={[styles.demo, {backgroundColor: "blue"}]}></ View>
9.也就是如果Text元素在Text里邊赦政，可以考慮為inline元素， 如果單獨在View里邊耀怜，那就是Block恢着。
10.我把View設(shè)置了justifyContent: 'center',alignItems: 'center'的樣式，并在里面放上了一個ViewPagerAndroid财破，這個時候如果不給他設(shè)置固定的寬度或者使用padding撐開他的話是看不見的掰派，大概是因為被View的style設(shè)置壓成了類似inline的屬性。
11.只有View組件在設(shè)置borderRadius屬性過后左痢，才會將自身的border一齊轉(zhuǎn)變成圓角靡羡，其他元素比如Image和Touchable類的都不會有任何反應(yīng)系洛，邊角是方的。
12.如果突然出現(xiàn)了略步，不顯示圖片的情況描扯，可以給他加一個邊框，這樣可以確定是沒有找到資源還是布局錯誤趟薄，我非常意外的發(fā)現(xiàn)只需要設(shè)置borderWidth為0就可以讓圖片顯示出來绽诚。（改：比較大的圖片有時候都不會顯示出來，這就很尷尬了）
13.在設(shè)置react-native-swiper的點的樣式的時候杭煎，不能傳入函數(shù)返回值恩够，需要直接傳入一個Element對象，我不知道是哪里出了錯：
class Dot extends Component{
render(){
return(
<View style={
{backgroundColor: 'rgba(0,0,0,.2)',
width: 2,
height: 2,
borderRadius: 10,
marginLeft: 3,
marginRight: 3,
marginTop: 3,
marginBottom: 3
}}/>
);
}
}
如果我傳入Dot.render()系統(tǒng)會報錯岔帽，提示我是一個空元素玫鸟，但是直接傳入View就可以成功。
14.RN中元素默認的定位方式是 relative 犀勒，并且只有relative 和 absolute 兩種定位方式。如果為組件加上 position:absolute 妥曲，它將會以inline的方式渲染在頁面上贾费。并且脫離正常文檔流。也就是視覺上會被后面的組件覆蓋檐盟，但不能通過zIndex方式調(diào)整褂萧。嵌套的Text不可用。
15.在給控件寫style屬性的時候葵萎，盡量用一個View包起來导犹，因為有很多控件的style樣式無法應(yīng)用，浪費調(diào)試時間羡忘。
16.在調(diào)試代碼的時候谎痢，要時刻注意this的指向，比如在下面的例子中卷雕，console.log中的this就指向了Drawer节猿，變成了調(diào)用他的this了,renderNavigationView`有毒，他會調(diào)用傳入的函數(shù)方法漫雕，并且把里面的this指針強行指向自己滨嘱。
class main extends Component{
navigationView(){
console.log(this);
}
render(){
return( <DrawerLayoutAndroid renderNavigationView={this.navigationView} >
.............
</DrawerLayoutAndroid> );
}
}
17.如果將文字放在圖片下方，但是只設(shè)置了圖片的寬度浸间，可能會導(dǎo)致文字不會緊貼圖片下方的問題太雨，如下就會出現(xiàn)此種問題，這個時候設(shè)置上height就行了魁蒜。
<View style={{justifyContent:"center",alignItems:"center"}}>
<Image source={require('')} style={{width:120}} resizeMode="contain"/>
<Text>沒有找到你的緩存喲</Text>
</View>
18.hairlineWidth:CallExpression用來定義當(dāng)前平臺最細的寬度囊扳。該屬性用來設(shè)置邊框或者兩個組件之間的分割線吩翻。javascript{ borderBottomColor: '#bbb', borderBottomWidth: StyleSheet.hairlineWidth}會根據(jù)當(dāng)前平臺信息，自動轉(zhuǎn)換成一根很細的線宪拥。
19.推庫上這篇文章《React Native 觸摸事件處理詳解》 關(guān)于手勢處理的仿野，非常有用！Ｋ＝抛鳌！５奚病Ｇ蛱巍！
