Question

在我的React-Native项目中，我使用了一个Navigation抽屉。在该抽屉中，我声明了两个屏幕- NoteMeHome 和 MakeNote 。最初， NoteMeHome 是“抽屉导航”的初始路径。从 NoteMeHome.js （第一个屏幕）类中，转到 MakeNote.js （第二个屏幕）。在此 MakeNote.js 类中，我使用了一种表格进行填写。用户点击提交后填写表单后，将返回到previos屏幕（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

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

代替：

I0411 17:27:33.756432 1 healthapiclient.go:163] Dialing connection to https://healthcare.googleapis.com:443/v1beta1 I0411 17:27:58.809932 1 mllpreceiver.go:107] Accepted connection from 10.128.0.5:58698 I0411 17:27:58.810140 1 healthapiclient.go:182] Sending message of size 319. E0411 17:27:58.880369 1 mllpreceiver.go:118] handleMessage: Send: request failed: 400 { "error": { "code": 400, "message": "location ID invalid, expected us-central1", "status": "INVALID_ARGUMENT" } } I0411 17:27:58.880691 1 mllpreceiver.go:119] Closed connection from 10.128.0.5:58698

添加此内容：

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

然后添加回调函数：

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

希望有帮助！

如何在React-native的“抽屉”导航中从第二屏幕刷新先前的“抽屉”屏幕？

1 个答案: