javascript - 如何在 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(First Screen)但没有数据刷新。

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

Answer 1

您可以在调用 navigate 时将回调函数作为参数传递。

代替:

this.props.navigation.navigate('第一');

添加这个:

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

然后添加回调函数:

refresh() {
  this.doSomething();
}

希望对您有所帮助!