RN实现组件跳转、传值、回传、navigation内访问当前组件的成员数据

在学习RN过程中接触到StackNavigation导航组件，遇到的记录一下，以备后续查阅。

1、使用navigate函数实现页面跳转(A->B 可携带参数)           

//A页面跳转B页面：
this.props.navigation.navigagte(routeName,params,actions);   
     //routeName:跳转路由页面名称(需要在RouteConfig中定义)。
     //params:跳转携带的参数。

//B页面获取A页面传递过来参数：
this.props.navigation.state.params.xxx; //xxx为参数名(需与A页面中params内对应)

 

2、页面跳转并接收回传数据(A->B->A)

//A页面跳转B,params中指定callback回调参数，用于接受B页面返回数据。
this.props.navigation.navigate('B', {
            title:'跳转B页面',
            callback: (data) => {
                console.log('B回传的数据:' + data);
            }
        });

//B页面调用A页面params中指定的callback函数回传数据（自定义标题栏样式选项）
static navigationOptions = ({navigation}) => ({
    header: (
        <ImageBackground style={{height: 48}} source={require('../images/navigation_bg.png')}>
            <View style={{
                height: 48,
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center'}}>
                <TouchableOpacity
                     style={{padding: 5}}
                     onPress={() => {
                        navigation.state.params.callback('回传A数据');
                        navigation.goBack();}}>
                     <Image style={{width: 30, height: 30}} source={require('../images/back.png')}/>
                </TouchableOpacity>
                <Text style={{fontSize: 24, color: '#ffffff'}}>{navigation.state.params.title}</Text>
                <Text style={{marginRight: 20, color: '#fff'}} onPress={() => Alert.alert('更多')}>更多</Text>
            </View>
        </ImageBackground>
     )
 })

 

3、导航拦内如何访问当前组件内成员数据

     【2】中B可以回传数据到A页面，但是数据是直接写死在导航栏内部的(“回传A数据”)，当前组件导航栏内是无法使用this关键字来访问组件内任何数据(成员变量、状态机变量等)，那如何在当前组件的导航栏内访问当前组件的数据呢？ 

     方式一：B组件定义一个成员变量that并在构造函数中将this赋值为that，后续涉及到组件内部数据访问用that来代替this。

//B组件中定义一个成员变量that
let
that;
constructor(props) {
    super(props);
    //将this赋值到that
    that = this,
    this.state = {
        returnData:'',//将要返回给A组件(页面的状态机变量)
    };
}

//定义一个成员函数用来处理返回到A组件并回传状态机中数据
returnDataToBComponent() {
        //更改状态机变量(可在其他地方，这里放在返回函数一起)
        this.setState({returnData:'回传状态机变量到A页面'});
        this.props.navigation.state.params.callback(this.state.returnData);
        this.props.navigation.goBack();
    }

//B组件中导航栏内使用that来实现当前组件内成员函数的访问
static navigationOptions = ({navigation}) => ({
    header: (
                ...
                ...
                <TouchableOpacity
                     style={{padding: 5}}
                     onPress={() => {
                        that.returnDataToBComponent();}
                     }>
                     <Image style={{width: 30, height: 30}} source={require('../images/bacak.png')}/>
                </TouchableOpacity>
                ...
                ...
     )
 })

方式二：使用navigation对象的setParmas函数将当前组件成员函数设置到navigation的params中，其后在当前组件的导航栏内可以通过navigation.state.params.xxxx 来实现对当前组件内成员函数的访问。

componentDidMount() {
     //当前组件成员函数设置到导航栏参数中，以便状态栏内可以访问当前组件成员函数
     this.props.navigation.setParams({goBackPage: this.returnDataToBComponent});
 }

returnDataToBComponent() {
    this.setState({returnData: '返回到组件A的状态机数据'}, () => {
         this.props.navigation.state.params.callback(this.state.returnData);
         this.props.navigation.goBack();
    });
}

//B组件中导航栏内直接使用navigation的params来访问当前组件内成员函数。
static navigationOptions = ({navigation}) => ({
    header: (
                ...
                ...
                <TouchableOpacity
                     style={{padding: 5}}
                     onPress={() => {
                        navigation.state.params.goBackPage();}
                     }>
                     <Image style={{width: 30, height: 30}} source={require('../images/bacak.png')}/>
                </TouchableOpacity>
                ...
                ...
     )
 })