react-native頁面之間的相互傳值

react-native頁面之間的相互傳值

之前在自己學習react-native的時候，在頁面跳轉和傳值問題上花了一段時間去網上搜索和查找資料，自己總結了兩個方法。可以參考 https://blog.csdn.net/shb2058/article/details/80390468 和 https://blog.csdn.net/shb2058/article/details/80432014
首先設置一個不帶參數的頁面跳轉使用navigation
切換路由方法：

• 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('B')
                    }
                }>
                    <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',{
            params:xx,
        })
    }
}>

子頁面接收參數

constructor(props){
    super(props);
    const {navigation} = this.props;
    let yy = navigation.getParam("params"); 
}

這樣子頁面就獲取到父頁面傳遞過來的值了。
然后是子頁面帶參數返回頁面
方法一：
子頁面傳遞參數

<TouchableOpacity onpress={
    ()=>{
        this.props.navigation.state.params.callBack(params);
        this.props.navigation.goBack();
    }
}>
    <Text>點擊返回</Text>
</TouchableOpacity>

父頁面接收參數

<TouchableOpacity onpress={
    ()=>{
        this.props.navigation.navigate('B',{
            params:xx,
            callBack:(params) =>{
                Alert(params);
            }
        })
    }
}>

方法二：添加一個監聽器DeviceEventEmitter
子頁面

TouchableOpacity onpress={
    ()=>{
        DeviceEventEmitter.emit('returnData',params);
        this.props.navigation.goBack();
    }
}>
    <Text>點擊返回</Text>

父頁面

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

OK，就這樣了~~~