RN-学习笔记

1. react-native-swiper 轮播组件

参考
http://www.jianshu.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.jianshu.com/p/04dfef54645c

5.两种方式实现城市三级联动 + （react-narive-picker）+ （sectionList高性能的分组列表组件）+ （webview

http://www.jianshu.com/p/ea94c8c1ee44