Question

我在使用标签导航器时遇到了一些麻烦。我在此标签导航器中有3个标签。

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

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

例如，我有这个：

{{config('app.mail_driver')}}

在其他组件中，我执行以下操作：

tabNavigator = createMaterialBottomTabNavigator(
  TabNumber1,
  TabNumber2,
  TabNumber3
);

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

有什么办法吗？

Answer 1

此集合将传递到用户导航的路径，在这种情况下，它将成为轻敲路径，而不是该路径中的屏幕之一。要将从这些屏幕之一传递的参数导入到Tab Navigator

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

与此相关的讨论：What should happen when passing params to a navigator route?

Answer 2

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

AsyncStorage

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。绕个头可能有点复杂，但是当您了解它后，就可以在您的App上共享全局状态。而且AsyncStorage已从React Native中删除，因此只能通过React native community访问。

标签导航器中标签之间的React Navigation共享参数

2 个答案: