如何在 React Navigation 中将参数从前一个屏幕传递到我的当前屏幕？答案

【问题标题】：How to pass params from a previous screen to my current screen in React Navigation?如何在 React Navigation 中将参数从前一个屏幕传递到我的当前屏幕？
【发布时间】：2020-03-05 16:28:19
【问题描述】：

在屏幕 A 上，有一个值用于跟踪 GraphQL 突变的加载。我想将该加载值传递给屏幕 B。我的问题是，当我尝试使用 navigation.navigate(ScreenB, { loading }) 将该值作为参数传递给屏幕 B 时，加载的值不会更新 - 它始终保持不变调用 navigation.navigate 的那一刻。

我知道setParams 会更新给定路由的参数，但它似乎不适用于我的用例，因为它不会更改路由之间的参数。有什么方法可以让前一个屏幕动态设置参数，以便我可以在当前屏幕上恢复更改的值？

const ScreenA = (props) => {
  const { data, loading } = useQuery(QUERY);

  (
    <View>
      <Button onPress={() => navigation.navigate(ScreenB, { loading } }/>
    </View>
  )
}

const ScreenB = (props) => {
  const screenALoading = navigation.getParam('loading');

  return (
    <Text>{loading}</Text>
  )
}

【问题讨论】：

那么，您的用例是什么？请显示代码。
在 ScreenB 中试试这个。 const screenALoading = props.navigation.state.params.loading;

标签： reactjs react-native react-navigation react-navigation-stack

【解决方案1】：

您可能需要考虑为您的应用添加某种类型的全局状态，因为它可以解决这个问题，并且随着您的应用变得越来越大，您可能希望在将来添加它。我相信Redux 是最好的，但你可以使用 Context 和 react hooks 来创建你自己的。之后，您可以从前一屏设置状态并在当前屏中读取。

【讨论】：

【解决方案2】：

giotskhada 的回答很有道理。 Redux 是通过保持全局状态来解决这类问题的一种非常有用的方法，而这类问题是 Redux 如何为 Apollo 提供有用补充的一个很好的例子。

话虽如此，我不想为一件小事设置 Redux，所以我继续解决这个问题，我想出了一种方法来解决这个问题，而不需要为感兴趣的人添加 redux。

为了在从屏幕 A 切换后更新屏幕 B 上的加载，我使用更新后的值再次调用 navigation.navigate，但仅在切换到屏幕 B 之后。

const [navigatedToScreenB, toggleNavigatedToScreenB] = useState<boolean>(false);

useEffect(() => {
  if(navigatedToScreenB) {
   navigation.navigate(ScreenB, { loading });
  }
}, [loading])

由于我只想进一步导航到 ScreenB，如果加载发生变化，添加 loading 作为 useEffect 的依赖项很重要。

并在 onPress 函数中切换到 ScreenB 我这样做：

onPress={() => 
  {
    toggleNavigatedToScreenB(true);
    navigation.navigate(ScreenB, { toggleNavigatedToScreenB });
  }
}

通过将 toggleNavigatedToScreenB 传递给 ScreenB，我可以提醒 ScreenA 我不再在屏幕 B 上，以便在加载更改时停止导航。如果我要更改屏幕以停止导航到 ScreenB。例如在 ScreenB 的后退按钮中，我会输入：

onPress={() => 
  {
    toggleNavigatedToScreenB(false);
    navigation.goBack();
  }
}

我承认它比 redux 复杂得多，但我让它工作了，所以我想把这个解决方案分享给任何有同样问题的人。

【讨论】：