Question

在导航时如何刷新数据？例如，如果我要编辑某些内容然后按“后退箭头”，我想立即看到所做的更改。

    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});

    }); 
}

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

Answer 1

如果要从另一个组件访问组件的方法，则应绑定它（可能在prop或导航参数内）。并访问“后退箭头”（我认为您指的是devıce的后退按钮，否则由您决定），您可以使用react native中的BackHandler。

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

Answer 2

如果您想导航回上一个组件并将数据传递到上一个组件，则可以使用（）=> this.props.navigation.goBack（）

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

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

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

Answer 3

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

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

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

导航回本机时刷新数据

3 个答案: