主页 / coding / 问题 / 79368233
Accepted
Wagner Gauer
Asked: 2025-01-19 09:20:53 +0800 CST

当我使用 react-redux 进行状态管理时，如何让我的应用向用户显示身份验证组或普通应用？

  • 772

我正在尝试使用用户状态来确定我的应用是否显示身份验证组，但现在我明白我的设置无法工作，因为根布局组件无法访问状态。

我怎样才能实现我的目标？

import {
  DarkTheme,
  DefaultTheme,
  ThemeProvider,
} from "@react-navigation/native";
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import { Drawer } from "expo-router/drawer";
import * as SplashScreen from "expo-splash-screen";
import { StatusBar } from "expo-status-bar";
import { useEffect } from "react";
import "react-native-reanimated";
import { useColorScheme } from "@/hooks/useColorScheme";
import { selectCurrentUser } from "@/store/auth/authSlice";
import { useSelector } from "react-redux";
import "react-native-gesture-handler";
import { Provider } from "react-redux";
import store from "../store/store";

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const currentUser = useSelector(selectCurrentUser);
  const colorScheme = useColorScheme();
  const [loaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (

    <Provider store={store}>
      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
        {currentUser ? (
          <Drawer>
            <Drawer.Screen name="(tabs)" options={{ headerShown: false }} />
            <Drawer.Screen name="+not-found" />
          </Drawer>
        ) : (
          <Stack>
            <Stack.Screen
              name="(authentication)"
              options={{ headerShown: false }}
            />
          </Stack>
        )}

        <StatusBar style="auto" />
      </ThemeProvider>
    </Provider>
  );
}

我尝试使用选择当前用户但出现此错误：找不到 react-redux 上下文值

react-native

1 个回答

  1. Best Answer

    组件RootLayout是渲染Provider提供 Redux 上下文的 Redux 组件的组件，因此它本身不能使用useSelector钩子。将逻辑推Provider到 ReactTree 的更高位置，或者将currentUser ? ....逻辑推到 ReactTree 的更低位置。

    例子：

    • 推动ReactTreeProvider 向上

      import { Provider } from "react-redux";
import store from "../store/store";

...

<Provider store={store}>
  <RootLayout />
</Provider>

      export default function RootLayout() {
  const currentUser = useSelector(selectCurrentUser);
  const colorScheme = useColorScheme();
  const [loaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
      {currentUser ? (
        <Drawer>
          <Drawer.Screen name="(tabs)" options={{ headerShown: false }} />
          <Drawer.Screen name=" + not-found" />
        </Drawer>
      ) : (
        <Stack>
          <Stack.Screen
            name="(authentication)"
            options={{ headerShown: false }}
          />
        </Stack>
      )}
      <StatusBar style="auto" />
    </ThemeProvider>
  );
}

    • 将消费者推到ReactTree下方

      const App = () => {
  const currentUser = useSelector(selectCurrentUser);

  return currentUser
    ? (
      <Drawer>
        <Drawer.Screen name="(tabs)" options={{ headerShown: false }} />
        <Drawer.Screen name=" + not-found" />
      </Drawer>
    ) : (
      <Stack>
        <Stack.Screen
          name="(authentication)"
          options={{ headerShown: false }}
        />
      </Stack>
    );
};

      export default function RootLayout() {
  const colorScheme = useColorScheme();
  const [loaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <Provider store={store}>
      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
        <App />
        <StatusBar style="auto" />
      </ThemeProvider>
    </Provider>
  );
}
    • 1

相关问题