1. react-native-swiper 輪播組件
參考
http://www.lxweimin.com/p/4dba338ef37a
render() {
if(this.state.swiperShow){
return(
<View>
<Swiper height={ 300 } //高度
showsButtons={false} //顯示左右箭頭
autoplay={true} //頁面自動跳轉
autoplayTimeout={ 2.5 } //設置每個頁面自動滑動的停留時間
autoplayDirection={ true } //允許控制圓點的方向
index = { 1 } //從第幾頁開始播放
showsPagination={ true } //顯示小圓點，(pagination是頁碼的意思)
paginationStyle={{ position:'absolute',bottom:10}}
activeDotStyle={{backgroundColor:'#ff7454', width: 10, height: 10}}
horizontal={ true } //滾動的內容橫向排列
>
<View style={styles.win}>
<Image source={ require('../8.jpg')} style={styles.img}/>
</View>
<View style={styles.win}>
<Image source={ require('../10.jpg')} style={styles.img2} />
</View>
<View style={styles.win}>
<Image source={ require('../8.jpg')} style={styles.img}/>
</View>
</Swiper>
</View>
)
}else {
return (
<View style={{height:200}}>
<Image source={ require('../8.jpg')} />
</View>
);
}
}
}
react-native-swiper在安卓上與TabNavigator共用時不顯示內容問題（這里是巨坑，記得填坑）http://blog.csdn.net/qq_31280709/article/details/73441330
<Image></Image>讓圖片充滿元素
img2: {
width: width,
height:300,
resizeMode: 'stretch'
}
2.array.map(callback,[ thisObject]); （ map在這里是映射的意思）
-
- array.map(callback,[ thisObject]); （ map在這里是映射的意思）
-
callback的參數也類似：
[].map(function(value, index, array) {
// ...
});
-------------------------------------------------------------------
例一：
map方法的作用不難理解，“映射”嘛，也就是原數組被“映射”成對應新數組。下面這個例子是數值項求平方：
var data = [1, 2, 3, 4];
var arrayOfSquares = data.map(function (item) {
return item * item;
});
alert(arrayOfSquares); // 1, 4, 9, 16
callback需要有return值
--------------------------------------------------------------------
例二：
data1 = dataJson.data;
i++;
data1.map( (item)=> {
dataList.push({ //dataList是全局定義的空數組
key: i,
value: item
})
i++;
} )
3.驗證碼倒計時 setInterval() 和 clearInterval()
coutDown() {
this.setState({
MainTime:60,
MainTimeTitle: ''
});
this.bb = setInterval( () => {
var aa = this.state.MainTime - 1;
if( aa ===0){
clearInterval( this.bb );
this.setState({
MainTime:'',
MainTimeTitle: '重新獲取'
})}else{
this.setState({
MainTime: aa,
MainTimeTitle: ''
})
}
},1000)
}
-------------------------------------
<Text
onPress={ this.coutDown.bind(this) }
style={ styles.time}
>{this.state.MainTime}{this.state.MainTimeTitle}
</Text>
(踩坑) ：這樣寫的話會有個警告（如下，如圖）：
countDown()中的bb方法一直在執行
（解決方法）如下：
Waring: Can only update a mounted or mounting component.
分析：可以看到在 countdown方法中每秒中調用一次bb方法去遞減秒數，
當組件unmounted之后這個timer并沒有停止，所以出現了上面的問題。
--------------------------------------------------------
解決方法：
將每次setInterval返回的ID保存起來，在componentWillUnmount方法中clearInterval
--------------------------------------------------------
完整代碼：
//組件將被卸載
componentWillUnmount() {
clearInterval(this.state.timeId)
}
//倒計時
coutDown() {
this.setState({
MainTime:60,
MainTimeTitle: ''
});
this.bb = setInterval( () => {
var aa = this.state.MainTime - 1;
if( aa ===56 ){
clearInterval( this.bb );
this.setState({
MainTime:'',
MainTimeTitle: '重新獲取'
})}else{
this.setState({
MainTime: aa,
MainTimeTitle: ''
})
}
},1000)
this.setState({
timeId: this.bb
});
}
http://blog.csdn.net/tujiaw/article/details/58238975
4.(react-native-image-picker)上傳頭像 + (modal浮層) +（AsyncStorage.setItem-getItem）
http://www.lxweimin.com/p/04dfef54645c
