ReactNative之属性Props、State（四）

前言

眼看很多公司都开始尝试使用ReactNative,达到跨平台开发，最近也写了很多文章，希望让更多想了解的同学快速上手ReactNative.

如果喜欢我的文章，可以关注我微博:袁峥Seemygo

ReactNative之组件属性(Props、State)

• 在App开发中，少不了组件之间的传值，在RN中组件之间通信需要用到Props和State。

Props(属性)

• 什么是Props？一般用于自定义组件，大多数组件在创建时就可以使用各种参数来进行定制，用于定制的这些参数就称为props（属性）。
• name:就是Props，通过this.props.name访问

<Room name="小码哥" />

• 注意：props是在父组件中指定，而且一经指定，在整个组件的生命周期中都不再改变。
• 使用

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="小码哥" />
    );
  }
}

const styles = StyleSheet.create({
    viewStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',

    },
    textStyle:{
        marginTop:20
    }

});

• 效果

State

• State：如果以后想修改某个属性，就修改界面，就需要用state。

• 注意:State属性一般在constructor中声明(ES6)，在setState中修改数据.

• 定义state属性

this.state = {
            num:1,
        };

• 修改state属性

this.setState({
            num : number
        })

• 每隔一秒，人数+1，定时器

• 注意：这里定时器方法必须用bind.

• 使用

// 自定义房间组件
class Room extends Component {

    timeUpdate() {
        var number = this.state.num;

        number++;

        this.setState({
            num : number
        })

    }

    // 构造方法
    constructor(props){
        super(props);

        // 定义state属性
        this.state = {
            num:1,
        };

        console.log('初始化对象');

        // 创建定时器 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>

        );
    }

}

// 主组件

export default class ReactDemo extends Component {
  render() {
    return (
        <Room name="小码哥" />
    );
  }
}

const styles = StyleSheet.create({
    viewStyle:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',

    },
    textStyle:{
        marginTop:20
    }

});