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