在 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> ); }