react-native踩坑記錄----頁面跳轉

1. 學習使用react-native構建一個帶登陸模塊的APP，如何在APP登陸后頁面跳轉到主頁。第一次做的時候，在index.ios.js里實現了全部的邏輯，感覺太笨重。嘗試修改：

<View style={styles.flex}>
     {!this.state.isLoadingShow ?
          <Main showIndex={this.state.showIndex}/>: null
     }
     {this.state.showLogin.flex == 1 ?
           <Login showLogin={this.state.showLogin} setSet={this.setSet.bind(this)}/>
           :null
     }
 </View>

2. Login組件作為子組件，登陸事件處理函數需要修改父組件的state，子組件調用父組件的方法是this.props，既可以是父組件的屬性，也可以是方法。Login組件內部可以通過"this.props.被調用的方法"來獲得父組件傳過來的方法，以修改父組件的state。

3. 子組件獲得父組件的屬性，慎重再賦值給子組件的state，state只能通過this.setState函數來修改。

4. 子組件修改父組件state的代碼如下：

父組件：

    setSt(st) {
        this.setState(st);
    }

子組件：

this.props.setSt({
            showLogin: {
                height:0,
                width:0,
                flex:0,
            },
            isLoadingShow: true
        });

 

附：Modal組件和react-native-simple-router組件實現頁面跳轉

http://www.tuicool.com/articles/ZJ7fime

http://blog.csdn.net/yeshaojian/article/details/68925286