前言

眼看很多公司都開始嘗試使用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
    }

});