React Navigation 在选项卡导航器中的选项卡之间共享参数答案

【问题标题】：React Navigation share params between tabs in tab navigatorReact Navigation 在选项卡导航器中的选项卡之间共享参数
【发布时间】：2020-03-30 11:50:42
【问题描述】：

我在使用标签导航器时遇到了一些问题。我在这个标签导航器中有 3 个标签。

我有一个组件，在按下时，它会根据条件导航到这三个路线之一，并传递一些参数。

但是，当我切换到另一个选项卡时，我传递的参数应该与此选项卡共享。

例如我有这个：

tabNavigator = createMaterialBottomTabNavigator(
  TabNumber1,
  TabNumber2,
  TabNumber3
);

从另一个组件我做这样的事情：

navigation.navigate('TabNumber1', myParams);

它将我带到那里并且工作正常，但是当我转到 TabNumber2 时，导航由 Tab Navigator 处理，因此我无法传递当前路线的参数。

有什么办法吗？

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

我建议将此数据存储在 AsyncStorage 或 Context Api 中。

异步存储

const KEY = 'some-specific-key';

export const getDataFromStorage = async () => {
  const data = await AsyncStorage.getItem(KEY);
  if (data) return JSON.parse(data);
  return null;
};

上下文

import { createContext } from 'react';

const AuthContext = createContext({
  userId: null,
  login: () => {},
  logout: () => {}
});

function Auth() {
  const { login, userId } = useContext(AuthContext);

  return !userId && <Button onClick={() => login('12345')}>Log in<Button>;
}

function App() {
  const [userId, setUserId] = useState(null);

  const login = (userId) => {
    setUserId(userId);
  };

  const logout = () => {
    setUserId(null);
  };

  return (
    <AuthContext.Provider value={{ userId, login, logout }}>
        // Your code
    </AuthContext.Provider>
  );
}

这两个选项都适用于您的用例。但是我建议使用 Context Api。理解它可能有点复杂，但是当你理解它时，你可以简单地在你的应用程序上共享全局状态。并且 AsyncStorage 已从 React Native 中移除，因此只能通过 React native community 访问。

【讨论】：

【解决方案2】：

这个集合被传递给用户导航的路径，在这种情况下，它成为一个点击路径，而不是路径中的屏幕之一。导入从这些屏幕之一传递到选项卡导航器的参数

this.props.navigation.dangerouslyGetParent().getParam('setParamNameKey')

【讨论】：