react-native 学习笔记

语法相关

---

state与prop

state用法：
state很像绑定在控件中的参数，当更新state中的值时，对应控件的显示就会更新。
在构造函数中添加声明，使用时直接取用this.state.data，如果更新值直接使用 this.setState({data:[1,2,3]})。在js中，可以将键值对{key:value}当做一个实例对象使用。

    constructor(props){
        super(props);
        this.state = {
            data : [],
        }
    }

prop用法
这个更像是属性，即使用特定控件时，通过更改属性来定制控件样式。声明方式如下，使用为this.prop.time.
属性的类型有多种，包含func类型。可在需要回调时使用。

    // 声明属性类型
    static propTypes = {
        time: React.PropTypes.string.isRequired, // 注意不是isRequired()
        duration: React.PropTypes.string.isRequired,
    }
    // 设置属性默认值
    static defaultProps = {
        onClickStart: ()=>{},
        onClickRecord: ()=>{},
        onClickStop: ()=>{},
    }

func: ()=>{}

let func = ()=>{}
()中为形参位置，{}中为执行的代码
如果没有{}，比如 (a,b)=>a+b 则相当于 (a,b) => {return a+b}

!==, ===, !=, ==

== 和 != 比较若类型不同，先偿试转换类型，再作值比较，最后返回值比较结果 。
而
=== 和 !== 只有在相同类型下,才会比较其值。

flexbox

react-native默认的布局是放在flexbox中的，相当于安卓中的LinearLayout，默认是垂直方向的。所以布局的时候按照安卓的布局方式就可以了。
如果想让某个视图拜托限制，可以设置 position:”absolute”,设置一个绝对位置。

创建n个view

如果要创建N个视图，这里的方法是假设有个数据数组datas，

const Views = datas.map((ele, idx) => {
            /**
             *  返回view数组时，需要在view上标注key标签
             */
            return(
                <View key={ele.key}>
                    <Text>{ele.time}</Text>
                    <Text>{ele.degree}</Text>
                </View>
            )
        })

然后就可以在render() 方法中将Views作为一个新视图使用，比如
<View>{Views}</View>。