导航返回时刷新数据反应本机答案

【问题标题】：Refresh data when navigating back react native导航返回时刷新数据反应本机
【发布时间】：2018-10-17 17:32:13
【问题描述】：

返回时如何刷新数据？例如，如果我想编辑某些内容，然后按“返回箭头”，我想立即看到更改。

    componentWillMount() {
    getData("data", (res) => {
        this.setState({ name: res.name, date: res.date});
        var date = new moment(this.state.date);
        var currentDate = new moment(); 
        var duration = moment.duration(date.diff(currentDate)).as("days");
        duration = Math.round(duration + 1).toString();
        var daysLeftPercent = Math.round([duration / 340] * 100);
        this.setState({ daysLeft: duration, daysLeftPercent: daysLeftPercent});

    }); 
}

像这样，但我也想在另一个页面上按“后退箭头”时运行它。

【问题讨论】：

这是从屏幕 B 导航返回时访问屏幕 A 功能的方法 stackoverflow.com/a/52732960/7462666 导航返回时只需调用刷新
请阅读文档：reactjs.org/docs/react-component.html。您可以使用shouldComponentUpdate(nextProps, nextState) 或static getDerivedStateFromProps(props, state)

标签： react-native react-native-navigation

【解决方案1】：

如果你想从另一个组件访问一个组件的方法，你应该绑定它（可能在道具或导航参数中）。要访问“后退箭头”（我认为您的意思是设备的后退按钮，否则由您决定）您可以使用本机反应中的 BackHandler。

  BackHandler.addEventListener(
    "hardwareBackPress",
    this.props.onPressBackButton
  );
  ...
  onPressBackButton = () => {
    //do something
  }

【讨论】：

【解决方案2】：

如果你想导航回上一个组件并将数据传递给上一个组件，你可以使用 () => this.props.navigation.goBack()

例如，如果您想单击按钮返回：

<TouchableHighlight onPress={() => this.props.navigation.goBack(
  //do something here

  )}>    
  <Text> Go Back to previous component </Text>
</TouchableHighlight>

【讨论】：

我可以将它添加到左上角的按钮（在标题中）而不是创建一个新按钮吗？
如果使用navigationOptions在组件之间导航，默认情况下组件头部左侧会有一个返回按钮
@perry 那么如何设置默认返回按钮的 goBack 回调（如果我们不使用自定义左页眉）？

【解决方案3】：

React Native 中导航返回时如何刷新屏幕----

React.useEffect(() => { const unsubscribe = navigation.addListener('focus', () => { Alert.alert('Refreshed'); }); return unsubscribe; }, [navigation]);

在 useefect 和渲染/返回之前使用它

【讨论】：

我认为他们要求重新获取数据，而不是刷新整个页面。