根据先前的路由有条件地重新加载组件答案

【问题标题】：Conditionally reload component based on previous route根据先前的路由有条件地重新加载组件
【发布时间】：2018-12-30 20:05:11
【问题描述】：

也许有人可以帮助我解决我遇到的 react-navigation (2.0.4) 的 React Native 问题。我有一个页面（页面 C - RouteShowScreen），我想有条件地重新加载，这取决于它是从页面 A（RoutePrepareScreen）还是页面 X（导航到页面 C 的任何其他页面）导航到的，我就是不能似乎使生命周期方法正确。需要明确的是，如果从页面 A (RoutePrepareScreen) 导航到页面，我希望页面重新加载，但如果从任何其他屏幕导航到页面则不需要。我尝试使用 willFocus 侦听器，但随后页面 C 重新加载，无论它是从页面 A 还是页面 B 导航到的。

RoutePrepareScreen

...

this.props.navigation.navigate("RouteShow", {
  currentLat: latitude,
  currentLng: longitude,
  destinationAddress: this.state.destinationAddress,
  currentAddress: this.formatCurrentAddress(),
  destinationLat,
  destinationLng,
  speed,
  hoursUntilBreak,
  estimatedShiftLength});
}

...

RouteShowScreen

/** This caused the page to reload, regardless of how it was navigated to **/

willFocus = this.props.navigation.addListener(
  'willFocus',
  () => {
    this.handleRouteLoad();
  }
);

/** I also tried using componentWillReceiveProps and adding an additional "reload" navigation parameter, but this threw the
app into an infinite loop **/

componentWillReceiveProps(nextProps) {
  if (nextProps.navigation.state.params.reload) {
    this.handleRouteLoad();
  }
}

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

在我的特殊情况下，我可以通过在RoutePrepareScreen 内导航时重置导航堆栈来使其工作 - 像这样：

    const resetAction = StackActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({
          routeName: "RouteShow",
          params: {
            currentLat: latitude,
            currentLng: longitude,
            destinationAddress: this.state.destinationAddress,
            currentAddress: this.formatCurrentAddress(),
            destinationLat,
            destinationLng,
            speed,
            hoursUntilBreak,
            estimatedShiftLength,
          }
        })
      ],
    });
    this.props.navigation.dispatch(resetAction);

但是，这对我来说有点脏（如果用例无法处理导航堆栈的完全重置，可能会站不住脚）。我很想看到另一种解决方案！

【讨论】：