ReactNative学习实例（四） 使用Navigator实现页面跳转和信息传递

Navigator管理页面的原理是借助页面栈，显示另一个页面就让这个页面入栈，返回的话就让他出栈。相比于安卓里活动之间的跳转，navigator显得非常灵活，如果将navigator作为根容器的话，那么每次跳转就是整个视图的跳转。但是也可以仅仅将navagator作为视图的一部分，比如我把视图里的组件A换成组件B。实际上，整个场景就是一个铺满的组件。

下面这个例子转自https://github.com/SpikeKing/WclNavigator/blob/master/navigator_simple.js

首先我们需要写两个组件，让第一个组件有两个可点击的控件，分别对应两种动画效果跳转到第二个组件。第二个组件有一个可点击控件，点击出栈返回第一个组件。

1.第一个组件

class FirstPage extends Component{

    _press(name,type){
        this.props.navigator.push({
            component:SecondPage,
            passProps:{
                name1:name
            },
            type:type
        });
    }

    render(){
        return(
            <View style={styles.container}>
                <View style={{height: 50,justifyContent: 'center',backgroundColor:'#dd0000',alignItems:'center'}}>
                    <Text style={styles.text}>第一页</Text>
                </View>
                <TouchableOpacity
                    onPress={()=>this._press('来自第一页，右出','Right')}
                    style={{height: 50,alignItems:'center',marginTop:20}}>
                    <Text style={styles.text}>点击进入第二页(右出)</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={()=>this._press('来自第一页，底出','Bottom')}
                    style={{height: 50,alignItems:'center'}}>
                    <Text style={styles.text}>点击进入第二页（底出）</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

可以看到这里的重点就是点击方法了，方法传入了两个参数，第一个用来表示点击的是哪个按钮，第二个是需要的动画类型。方法里是navagitor的入栈方法，这个方法接收一组参数，component就是目标组件，type是我们自定义的值，用来表示动画类型。passProps比较重要，用以向第二个组件传递数据。这里传递了一个名为name1的变量，第二个组件可以直接通过this.props.name1使用这个变量。

2.第二个组件：

class SecondPage extends Component{

    _pressBack(){
        this.props.navigator.pop();
    }

    render(){
        return(
            <View style={styles.container}>
                <View style={{height: 50,justifyContent: 'center',backgroundColor:'#00dd00',alignItems:'center'}}>
                    <Text style={styles.text}>第二页：{this.props.name1}</Text>
                </View>
                <TouchableOpacity
                    onPress={()=>this._pressBack()}
                    style={{height: 50,alignItems:'center',marginTop:20}}>
                    <Text style={styles.text}>点击返回</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

这里的点击方法就很简单了，就是当前组件出栈。可以看到布局里直接使用了上面传入的name1.

3.主视图（组件）：

class AwesomeProject extends Component {// 初始化模拟数据
    
    render() {
        return(
            <View style={{flex:1}}>
                <Navigator
                    initialRoute={{component:FirstPage}}
                    configureScene={this.configureScene}
                    renderScene={this.renderScene}
                    ></Navigator>
            </View>
        );
    }

    configureScene(route,routeStack){
        if(route.type=='Bottom'){
            return Navigator.SceneConfigs.FloatFromBottom;
        } else{
            return Navigator.SceneConfigs.PushFromRight;
        }
    }

    renderScene(route,navigator){
        return<route.component navigator={navigator} {...route.passProps}/>
    }
}

这里要理解route,navigator只负责栈的管理，过程中值要通过route拿出。可以看到navigator需要实现三个属性，initialRoute表示初始状态显示的组件，直接传入组件名即可。configureScene表示动画效果，接收一个方法，方法接收两个参数，主要用第一个route,我在这个方法里用route.type拿出原来传入的type值并判断，返回相应的系统自带的动画效果。

renderScene是渲染方法，可以如上写死，渲染route,component，还要给这个组件传入navigator和passProps.

4.信息传递和传回：上面第一个组件通过push里的passProps将一个数据传递给了第二个组件，那么怎么从第二个组件传回第一个呢？其实原理也很简单，第一个组件想要得到第二个组件里的数据，可以向二号传递一个方法，方法接收数据参数并直接调用第一个组件的setState即可：、

在第一个组件中初始化一个属性并在渲染方法里使用：

// 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = { message:''};
      }

向第二个传入赋值方法，注意这里获取组件对象最好在方法外就得到，否则会混乱：

_press(name,type){
        const me=this;

        this.props.navigator.push({
            component:SecondPage,
            passProps:{
                name1:name,
                setMessage:function(message){
                    me.setState({message:message});
                }
            },
            type:type
        });
    }

在第二个组件里通过yhis.props调用这个方法：

componentDidMount() {
        if(this.props.setMessage){
            this.props.setMessage('这是返回的信息');
        }
    }

这样第二个组件出栈的时候就可以在第一个组件看到这个数据了。