ReactNative-Props,State,PropTypes(四)

Props与State可用于组件间传值

一.Props

在父组件中指定，不可改变属性值，无提示
name即为props
<Room name="小码哥" />
name的访问方式
this.props.name
示例代码:

    class Room extends Component {
        render() {
            return (
                <View style={styles.viewStyle}>
                     <Text sytle={styles.textStyle}>欢迎来到{this.props.name}直播间</Text>
                </View>
            );
        }
    }
    export default class ReactDemo extends Component {
      render() {
        return (
            <Room name="小码哥" />
        );
      }
    }

二.State

在constructor方法中定义,可改变属性值，无提示
constructor中声明

    constructor(props){
        super(props);

        this.state = {
            listData:[],
            curPage:0
        }
    }

setState中修改

        this.setState({
            listData:listData
        })

示例代码:

class Room extends Component {

    timeUpdate() {
        var number = this.state.num;
        number++;
        this.setState({
            num : number
        })
    }

    constructor(props){
        super(props);
        this.state = {
            num:1,
        };
        // 创建定时器 1秒 = 1000
        // 这里必须绑定,bind会生成了一个新的函数,并且由绑定者调用,否则this不明确
        setInterval(this.timeUpdate.bind(this),1000);
    }

    render() {
        return (
            <View style={styles.viewStyle}>
                <Text sytle={styles.textStyle}>欢迎来到{this.props.name}直播间</Text>
                <Text>观众数 {this.state.num}</Text>
            </View>
        );
    }
}

三.PropTypes

在组件内定义，定义属性类型，有提示，有类型检查

3.1.声明属性

引入React框架PropTypes，只能用于React框架的自定义组件，默认JS没有

import React, { Component,PropTypes } from 'react';

必须用static声明，不在任何方法中, 在组件内定义

    static propTypes = {
        name:PropTypes.string,
        age:PropTypes.number
    }

static用来定义类方法或类属性

3.2.定义属性值

定义属性默认值时必须用defaultProps

    //定义属性时设置初始值
    static defaultProps = {
        name:'xmg',
        age:20
    }

3.3.propTypes定义的类型

# 数组类型
PropTypes.array

# 布尔类型
PropTypes.bool

# 函数类型
PropTypes.func

# 数值类型
PropTypes.number

# 对象类型
PropTypes.object

# 字符串类型
PropTypes.string

# 规定prop为必传字段
PropTypes.func.isRequired

# prop可为任意类型
PropTypes.any.isRequired