如何在 React-native 的抽屉导航中刷新第二个屏幕调用之前的抽屉屏幕？

Question

在我的 React-Native 项目中，我使用一个导航抽屉。在那个抽屉里，我声明了两个屏幕 - NoteMeHome和MakeNote。最初，NoteMeHome作为抽屉导航的初始路线启动。从NoteMeHome.js（第一个屏幕）类，我转到MakeNote.js（第二个屏幕）。在这个MakeNote.js类中，我使用了一张表单来填写。填写表单后，当用户点击提交时，它将返回到之前的屏幕（NoteMeHome.js） ，并且由于此NoteMeHome.js类中有 API 调用，因此它将刷新并显示提交的数据。

但是每当我从MakeNote屏幕转到NoteMeHome屏幕时，它只会更改为后退堆栈，但 NoteMeHome 屏幕不会刷新，因为它显示的是旧数据。

为了控制抽屉的流程和结构，我创建了一个名为 - 的类

NavigationDrawerStructure.js

class NavigationDrawerStructure extends Component {
  static navigationOptions = {
    header: null ,
  };

  toggleDrawer = () => {
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          {/*Donute Button Image */}
         <Icon name='menu'/>
        </TouchableOpacity>
      </View>
    );
  }
}
const FirstActivity_StackNavigator = createStackNavigator({
  First: {
    screen: NoteMeHome,
    navigationOptions: ({ navigation }) => ({
      title: 'Home',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },

});

const Screen2_StackNavigator = createStackNavigator({
  Second: {
    screen: MakeNote,
    navigationOptions: ({ navigation }) => ({
      title: 'Create Note',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});



const Drawer = createDrawerNavigator({
  Screen1: {
    screen: FirstActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Home',

      drawerIcon: (
        <Icon name='home' size={24}

        />
      )

    },
  },

  Screen2: {
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Create Note',
      drawerIcon: (
        <Icon name='home' size={24}

        />
      )
    },
  },

});

const DrawerNavigatorExample = createStackNavigator({
  Drawer: { screen: Drawer, navigationOptions: { header: null } },
  ScreenExternal: {
    screen: ScreenExternal,
    navigationOptions: { title: 'Screen External' },
  },
});

export default createAppContainer(DrawerNavigatorExample);

在MakeNote.js（第二个屏幕）中，我使用一个函数提交 POST 请求。这是代码-

submit() {
    this.setState({isLoading:true})
    let collection = {}
    collection.timestamp = this.state.timestamp,
    collection.status = this.state.status,
    collection.title = this.state.title,
    collection.detail = this.state.detail,
    collection.url = this.state.url,
    collection.mail = this.state.mail,
    collection.phone = this.state.phone,
    collection.category = this.state.category

    console.log('#HELLO:', collection);

    var url = 'my url';

    if(collection.title != '' ) {

            if(this.state.isNetConnected != false) {

              fetch(url, {
                method: 'POST',
                body: JSON.stringify(collection),
                headers: new Headers({
                  'Content-Type' : 'application/json',
                  'token': 'abcd',
                  'jwt': this.state.getValue

                })
              }).then(response =>
                {
                  this.setState({isLoading:false});
                  if (response.status !== 200) {
                      console.log('Status Code: ' + response.status);
                      return;
                  }

                  response.json().then(data =>{
                      console.log(data);
                      if(data.status == "saved") {
                        this.props.navigation.navigate('First'); 
                    }
                  });
              }
                )
              .catch(error=>{
                this.setState({isLoading:false})
                console.error('Error:', error)

              })

            } else{
              this.setState({isLoading:false});
              Alert.alert("Oops!! No Internet Connection Available");
            }

    } 

    else {
      this.setState({isLoading:false})
      Alert.alert('Please fill up the required field');
    }

  }

在提交函数中，您可以看到以下行初始化前一个屏幕 -

  if(data.status == "saved") {
                        this.props.navigation.navigate('First'); 
                    }

它显示了NoteMeHome（第一个屏幕），但没有刷新任何数据。

因此，我需要一个解决方案来刷新 NoteMeHome 屏幕并通过 API 调用显示最新数据。

Answer 1

当您调用 navigator 时，您可以传递回调函数作为参数。

代替：

this.props.navigation.navigate('First');

添加这个：

this.props.navigation.navigate('First', {
      onGoBack: () => this.refresh(),
    });

然后添加回调函数：

refresh() {
  this.doSomething();
}

希望能帮助到你 ！