在 React Native Expo 中為 App 組件創建 Wrapper

Question

我需要以某種方式從 App.js 訪問我的 Redux 商店，從文檔中它說我可以為我的應用程序創建新的入口點，所以我確實創建了一個但不知何故我的應用程序仍然無法訪問 Redux 商店。

Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

這是我的App.js代碼

 import React, { useState, useEffect } from "react"; import { NavigationContainer } from "@react-navigation/native"; import { createStackNavigator } from "@react-navigation/stack"; import { useFonts } from "expo-font"; import AppLoading from "expo-app-loading"; import { Provider } from "react-redux"; import { useDispatch, useSelector } from "react-redux"; //Layout import Auth from "./src/layout/Auth.layout"; import Register from "./src/layout/Register.layout"; import Drawer from "./src/navigation/Drawer"; export default function App() { const Stack = createStackNavigator(); const { isLoggedIn } = useSelector((state) => state.user); const [isLoading, setIsLoading] = useState(false); let [fontsLoaded] = useFonts({ DMSans: require("./assets/fonts/DMSans-Regular.ttf"), "DMSans-Medium": require("./assets/fonts/DMSans-Medium.ttf"), "DMSans-Bold": require("./assets/fonts/DMSans-Bold.ttf"), }); if (!fontsLoaded || isLoading) { return <AppLoading />; } else { return ( <NavigationContainer> {!isLoggedIn ? ( <Stack.Navigator initialRouteName="Auth" screenOptions={{ headerShown: false }} > <Stack.Screen name="Auth" component={Auth} /> <Stack.Screen name="Register" component={Register} /> </Stack.Navigator> ) : ( <Drawer /> )} </NavigationContainer> ); } }

這是我創建的EntryPoint.js ：

 import { registerRootComponent } from "expo"; import App from "../App"; import React from "react"; import { store, persistor } from "./state/store"; import { PersistGate } from "redux-persist/es/integration/react"; import { Provider } from "react-redux"; export default function EntryPoint() { return ( <Provider store={store}> <PersistGate persistor={persistor}> <App /> </PersistGate> </Provider> ); } registerRootComponent(EntryPoint);

我在這里錯過了什么？ 或者我可以實施更好的解決方案？

Answer 1

解決了，我最終刪除了 EntryPoint.js 並在我的 App.js 中創建了一個包裝器。

App.js代碼：

 import React, { useState, useEffect } from "react"; import { NavigationContainer } from "@react-navigation/native"; import { createStackNavigator } from "@react-navigation/stack"; import { useFonts } from "expo-font"; import AppLoading from "expo-app-loading"; import { Provider } from "react-redux"; //Layout import Auth from "./src/layout/Auth.layout"; import Register from "./src/layout/Register.layout"; import Drawer from "./src/navigation/Drawer"; import { store, persistor } from "./src/state/store"; import { PersistGate } from "redux-persist/es/integration/react"; import { useSelector } from "react-redux"; const AppWrapper = () => { const Stack = createStackNavigator(); const { isLoggedIn } = useSelector((state) => state.user); const [isLoading, setIsLoading] = useState(false); let [fontsLoaded] = useFonts({ DMSans: require("./assets/fonts/DMSans-Regular.ttf"), "DMSans-Medium": require("./assets/fonts/DMSans-Medium.ttf"), "DMSans-Bold": require("./assets/fonts/DMSans-Bold.ttf"), }); if (!fontsLoaded || isLoading) { return <AppLoading />; } else { return ( <NavigationContainer> {!isLoggedIn ? ( <Stack.Navigator initialRouteName="Auth" screenOptions={{ headerShown: false }} > <Stack.Screen name="Auth" component={Auth} /> <Stack.Screen name="Register" component={Register} /> </Stack.Navigator> ) : ( <Drawer /> )} </NavigationContainer> ); } }; export default function App() { return ( <Provider store={store}> <PersistGate persistor={persistor}> <AppWrapper /> </PersistGate> </Provider> ); }