React-native 导航器 goBack()后刷新页面

React-native 导航器 goBack()后刷新页面

Example

• A 页面

import React, { Component } from "react";
import { Text, View, TouchableOpacity } from "react-native";

class A extends Component {
    constructor(props) {
      super(props);
    }
    componentDidMount() {
        // 初始渲染
    }
    refreshScreen=()=>{
      this.refreshData();
    }
    goBScreen() {
        const { navigation } = this.props;
        navigation.navigate("B", {
            refresh:()=>{
                this.refreshScreen();
            },
        });
    }
    render() {
        return (
            <View>
                <TouchableOpacity onPress={this.goBScreen.bind(this)}>
                    <Text>跳转去 B 页面</Text>
                 </TouchableOpacity>
             </View>
        )
    }
}


// export default A;

• B 页面

import React, { Component } from "react";
import { Text, View, TouchableOpacity } from "react-native";

class B extends Component {
    constructor(props) {
      super(props);
    }

    componentDidMount() {
        this.refreshData();
    }
    goBack() {
        // B 页面操作完，返回 A 页面  并且调用 A 页面的更新数据方法
        this.props.navigation.goBack();
        this.props.route.params.refresh();
    }
    render() {
        return (
            <View>
                <TouchableOpacity onPress={this.goBack.bind(this)}>
                    <Text>编辑完数据  返回 A 页面</Text>
                 </TouchableOpacity>
             </View>
        )
    }
}


// export default B;