react-native页面之间的相互传值

react-native页面之间的相互传值

切换路由方法：

1. this.props.navigation.goBack() 返回上一层
2. this.props.navigation.popToTop() 返回堆栈最顶层
3. this.props.navigation.push(‘Details’) 继续往下推送新的路由，相当于子页面的子页面
4. this.props.navigation.navigate(‘Details’)将新路由推送到导航器中，如果没有在导航器中，则跳转到该页

跳转前页面（父页面）

import {Component} from "react";
import {
    Text,AlertStatic as Alert,
    TouchableOpacity,
    View,
    DeviceEventEmitter
} from "react-native";
import {createStackNavigator} from "react-navigation";
import B from '../B.js';
calss A extends Component {
    render(){
        return(
            
                {
                        this.props.navigation.navigate('Details')
                    }
                }>
                    点击跳转
                
            
         )
    }
}
const HomeScreen = createStackNavigator({
    Home: {screen: A},
    Details: {screen: B},
});
module.exports = A;

• 子页面

import {Component} from "react";
import {
    Text,
    TouchableOpacity,
    View,
    DeviceEventEmitter
} from "react-native";
class B extends Component {
    render(){
            return(
                
                    {
                            this.props.navigation.goBack();
                        }
                    }>
                        点击返回
                    
                
             )
        }
}
module.exports = B;

接下来带参数传递

1. 父页面传给子页面

{
        this.props.navigation.navigate('B',{
            data:'我是父页面传给子页面的数据',
        })
    }
}>

2. 子页面接收参数

constructor(props){
    super(props);
    const {navigation} = this.props;
    const data = navigation.getParam("data"); 
    this.state = {
    data
    }
}

子页面带参数返回页面

• 方法一
  • 子页面传递参数

{
        this.props.navigation.state.params.callBack({data: '我是还给原页面的数据'});
        this.props.navigation.goBack();
    }
}>
    点击返回

• 父页面接收参数

{
        this.props.navigation.navigate('B',{
            data:'我是父页面传给子页面的数据',
            callBack:(params) =>{
                Alert(params); // 父页面接收到返回的数据
            }
        })
    }
}>

• 方法二：添加一个监听器DeviceEventEmitter
  • 子页面

TouchableOpacity onpress={
    ()=>{
        DeviceEventEmitter.emit('returnData',params);
        this.props.navigation.goBack();
    }
}>
点击返回

+ 父页面

componentDidMount() {
     DeviceEventEmitter.addListener("returnData", (params) => {
            Alert(params);
        })
}

完了，很简单吧~