Описание
Я пытаюсь создать собственное приложение с использованием expo, используя @react-navigation
. Навигация работала , но после того, как я недавно сделал несколько обновлений зависимостей (чтобы не обновить требуемые зависимости), моя навигация прервалась. Когда я запускаю в своем телефоне клиент expo, я просто получаю
undefined is not an object (evaluating 'Object.keys(_routers.CommonActions)')
* [native code]:null in keys
- node_modules/@react-navigation/core/src/BaseNavigationContainer.tsx:240:35 in React.useImperativeHandle$argument_1
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:11228:23 in imperativeHandleEffect
* [native code]:null in imperativeHandleEffect
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:16921:31 in commitHookEffectList
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:16989:27 in commitLifeCycles
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20002:23 in commitLayoutEffects
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:307:15 in invokeGuardedCallbackImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:531:36 in invokeGuardedCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19768:10 in commitRootImpl
* [native code]:null in commitRootImpl
- node_modules/react-native/node_modules/scheduler/cjs/scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19590:4 in commitRoot
* [native code]:null in commitRoot
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18709:28 in runRootCallback
* [native code]:null in runRootCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
- node_modules/react-native/node_modules/scheduler/cjs/scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18556:30 in scheduleUpdateOnFiber
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:21822:15 in scheduleRootUpdate
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:23042:20 in ReactNativeRenderer.render
- node_modules/react-native/Libraries/ReactNative/renderApplication.js:52:52 in renderApplication
- node_modules/react-native/Libraries/ReactNative/AppRegistry.js:116:10 in runnables.appKey.run
- node_modules/react-native/Libraries/ReactNative/AppRegistry.js:197:26 in runApplication
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue
Я пытался следовать https://reactnavigation.org/docs/en/hello-react-navigation.html и не знаю, что делать.
Код
Мой App.tsx выглядит так:
import 'react-native-gesture-handler';
import React from 'react';
// navigation
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
// screens
import { LoginScreen } from './src/components/screens/login-screen';
import { DashboardScreen } from './src/components/screens/dashboard-screen';
import { SplashScreen } from './src/components/screens/spash-screen';
// graphql
import { ApolloProvider } from '@apollo/react-hooks';
import { ApolloClient, HttpLink, InMemoryCache } from 'apollo-boost';
// create stack navigator
const Stack = createStackNavigator();
// graphql stack
const cache = new InMemoryCache();
const client = new ApolloClient({cache, link: new HttpLink({ uri: 'http://192.168.0.52:3000' }), });
/** main app */
export default function App() {
return(
<ApolloProvider client={ client }>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name={'splashscreen'} component={SplashScreen} options={{ headerShown: false }} />
<Stack.Screen name={'dashboard'} component={DashboardScreen} options={{ headerShown: false }} />
<Stack.Screen name={'login'} component={LoginScreen} options={{ headerShown: false }} />
</Stack.Navigator>
</NavigationContainer>
</ApolloProvider>
);
}
и мои компоненты перемещаются так:
<View style={styles.container}>
<Button title={ 'Login' } onPress={ () => {
this.props.navigation.dispatch(StackActions.push('login'))
} } />
</View>
Мой репозиторий с полным кодом : https://github.com/vampyre-io/vampyre-app
и, наконец, мой пакет. json -зависимости:
"dependencies": {
"@apollo/react-hooks": "^3.1.3",
"@react-native-community/masked-view": "0.1.5",
"@react-navigation/native": "^5.0.5",
"@react-navigation/routers": "^5.0.1",
"@react-navigation/stack": "^5.0.5",
"apollo-boost": "^0.4.7",
"apollo-client": "^2.6.8",
"expo": "~36.0.2",
"graphql": "^14.6.0",
"graphql-tag": "^2.10.3",
"react": "~16.9.0",
"react-dom": "~16.12.0",
"react-native": "^0.61.5",
"react-native-gesture-handler": "~1.5.0",
"react-native-safe-area-context": "^0.6.0",
"react-native-screens": "2.0.0-alpha.12"
},