0

ある Tab.Screen から別の Tab.screen にトークンを渡すのに苦労しています

Stack.Navigator 内で Tab.Navigator を使用しています

<Stack.Screen name="Auth"/>コンポーネントに移動し<Tab.Screen name="Map"/>、そこにトークンを送信します。

props.navigation.replace("BottomTabs", {screen: "Map", params: {token: token}});

ここまでは問題ありませんが、現在は 2 つのタブ<Tab.Screen name="Map"/>と<Tab.Screen name="List"/>. ナビゲーション Tab を押して、Map コンポーネントから List コンポーネントにトークンを渡す必要があります。props.navigation.replace/navigate などで以前のように渡すことはできません。

誰かがタブ画面間でデータを渡す適切な方法を見つけるのを手伝ってくれるでしょうか? ありがとう！

4

2 に答える 2

0

わかりました、私の場合に最適な解決策と思われるものを見つけました: https://dev.to/efearas/how-to-usecontext-and-set-value-of-context-in-child-components-in-3-steps -3j9h

コンテキストファイルを作成しますauth-context.js:

import React from 'react';

export const AuthContext = React.createContext();

トークン フックを作成しApp.js、次のようにラップします。

import { AuthContext } from "./auth-context.js";

function AppNavigator() {
  const [token, setToken] = useState(null);
  return (
    <AuthContext.Provider value={[token, setToken]}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Auth">
          <Stack.Screen
            name="BottomTabs"
            component={BottomTabs} // this separate navigator has my map and list components and they also get token in this way
          />
          <Stack.Screen
            name="Auth"
            component={Auth}
          />
          <Stack.Screen
            // other components which I don't want to have in BottomTabs
          />
        </Stack.Navigator>
      </NavigationContainer>
    </AuthContext.Provider>

私のauth.jsコンポーネントでは、私はsetToken:

import { AuthContext } from "../auth-context.js";

export default function Auth(props) {

    const [token, setToken] = useContext(AuthContext);

    useEffect(() => {
        (async () => {
            const token = await AsyncStorage.getItem('token')
            if (token)
                setToken(token);
                props.navigation.replace("BottomTabs", {screen: "Map"});
        })()
    }, []);

ここでは、たとえば、AsyncStorage からトークンを取得しようとし、取得した場合は、コンテキスト フック (この方法で呼び出すことができる場合) に設定し、マップ画面 (子 Tab.Navigator にあります) に移動します。とにかく、これは React Navigation 5 を使用した私のプロジェクトの複雑さにすぎません。:)

トークンが設定されると、同じ方法で他のコンポーネントからトークンにアクセスできます。

import { AuthContext } from "../auth-context.js";

....

const [token, setToken] = useContext(AuthContext);

免責事項：私は専門家とはほど遠いので、私の解決策は最もきれいではないかもしれませんが、それは私にとってはうまくいき、私の闘争への答えが他の誰かにも役立つことを願っています:)。

誰かがもっとうまくできることを見たら、あなたの答えを追加してください。皆さんありがとう！

于 2020-11-20T10:24:07.753 に答える