react-native页面之间的相互传值
切换路由方法：
-
this.props.navigation.goBack()返回上一层 -
this.props.navigation.popToTop()返回堆栈最顶层 -
this.props.navigation.push(‘Details’)继续往下推送新的路由，相当于子页面的子页面 -
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(
<View>
<TouchableOpacity onpress={
()=>{
this.props.navigation.navigate('Details')
}
}>
<Text>点击跳转</Text>
</TouchableOpacity>
</View>
)
}
}
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(
<View>
<TouchableOpacity onpress={
()=>{
this.props.navigation.goBack();
}
}>
<Text>点击返回</Text>
</TouchableOpacity>
</View>
)
}
}
module.exports = B;
接下来带参数传递
- 父页面传给子页面
<TouchableOpacity onpress={
()=>{
this.props.navigation.navigate('B',{
data:'我是父页面传给子页面的数据',
})
}
}>
- 子页面接收参数
constructor(props){
super(props);
const {navigation} = this.props;
const data = navigation.getParam("data");
this.state = {
data
}
}
子页面带参数返回页面
- 方法一
- 子页面传递参数
<TouchableOpacity onpress={
()=>{
this.props.navigation.state.params.callBack({data: '我是还给原页面的数据'});
this.props.navigation.goBack();
}
}>
<Text>点击返回</Text>
</TouchableOpacity>
- 父页面接收参数
<TouchableOpacity onpress={
()=>{
this.props.navigation.navigate('B',{
data:'我是父页面传给子页面的数据',
callBack:(params) =>{
Alert(params); // 父页面接收到返回的数据
}
})
}
}>
- 方法二：添加一个监听器DeviceEventEmitter
- 子页面
TouchableOpacity onpress={
()=>{
DeviceEventEmitter.emit('returnData',params);
this.props.navigation.goBack();
}
}>
<Text>点击返回</Text>
+ 父页面
componentDidMount() {
DeviceEventEmitter.addListener("returnData", (params) => {
Alert(params);
})
}
完了，很简单吧~
