在屏幕 React Native 之间导航

Question

我来自 ReactJS，对如何在反应原生的屏幕之间导航有点困惑。

我正在使用这些 react-navigation 和 react-navigation-stack 版本：

“@react-navigation/native”：“^5.8.10”，“@react-navigation/stack”：“^5.12.8”

所以我已经有 2 个屏幕：

闪屏容器

 import React from 'react'; import {Text, View} from "react-native-reanimated"; class SplashScreenContainer extends React.PureComponent { redirectToHome = () => { const {navigation} = this.props; navigation.navigate('HomeContainer'); } render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text onPress={() => this.redirectToHome}> Splash Screen </Text> </View> ) } } export default SplashScreenContainer;

主屏幕容器

 import React from 'react'; import {Text, View} from "react-native-reanimated"; class HomeScreenContainer extends React.PureComponent { render() { return ( <View> <Text>Home Screen</Text> </View> ) } } export default HomeScreenContainer;

这是我的应用程序 js，用于在 NavigationContainer 中呈现屏幕：

应用程序.js

 import React from 'react'; import {SafeAreaView} from "react-native-safe-area-context"; import {NavigationContainer} from '@react-navigation/native'; import {createStackNavigator} from '@react-navigation/stack'; const SplashScreenContainer = React.lazy(() => import('./app/containers/SplashScreenContainer')); const HomeContainer = React.lazy(() => import('./app/containers/HomeContainer')); const Stack = createStackNavigator(); class App extends React.PureComponent { render() { return ( <SafeAreaView> <NavigationContainer> <Stack.Navigatior> <Stack.Screen name='SplashScreenContainer' component={() => <SplashScreenContainer {...this.props} />}/> <Stack.Screen name='HomeContainer' component={() => <HomeContainer {...this.props} />}/> </Stack.Navigatior> </NavigationContainer> </SafeAreaView> ) } } export default App;

在我使用npm run ios命令后，控制台给了我这个错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

我不明白这个错误是什么，我在这里错过了什么？ 如何在 react-native 的屏幕之间导航？

任何帮助都感激不尽。 谢谢你。

问候

Answer 1

好吧，我让它工作了。 以下是我所做的更改：

1. 从 App.js 中删除 SafeAreaView
2. 在 App.js 中添加 {Suspense} 因为我忘记了 React.lazy 依赖于 Suspense
3. 在 Home 中使用 SafeAreaView 和从“react-native”导入的 SplashScreen

应用程序.js

 import React, {Suspense} from 'react'; import {SafeAreaView, Text} from 'react-native'; import {NavigationContainer} from '@react-navigation/native'; import {createStackNavigator} from '@react-navigation/stack'; const SplashScreenContainer = React.lazy(() => import('./app/containers/SplashScreenContainer')); const HomeContainer = React.lazy(() => import('./app/containers/HomeContainer')); const Stack = createStackNavigator(); const Loading = () => { return ( <SafeAreaView> <Text>Loading</Text> </SafeAreaView> ) }; const Routes = () => { return ( <NavigationContainer> <Stack.Navigator initialRouteName='SplashScreenContainer'> <Stack.Screen name='SplashScreenContainer' component={SplashScreenContainer} options={{ headerShown: false }} /> <Stack.Screen name='HomeContainer' component={HomeContainer} options={{ headerShown: false }} /> </Stack.Navigator> </NavigationContainer> ) } class App extends React.PureComponent { render() { return ( <Suspense fallback={<Loading/>}> <Routes/> </Suspense> ) } } export default App;

SplashScreenContainer.js

 import React from 'react'; import {Button, SafeAreaView} from 'react-native'; class SplashScreenContainer extends React.PureComponent { constructor(props) { super(props); } redirectToHome = () => { const {navigation} = this.props; navigation.navigate('HomeContainer'); }; render() { return ( <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Button onPress={() => this.redirectToHome()} title='Go To Home Screen'/> </SafeAreaView> ) } } export default SplashScreenContainer;

HomeScreenContainer.js

 import React from 'react'; import {Button, SafeAreaView} from 'react-native'; class HomeContainer extends React.PureComponent { redirectToSplash = () => { const {navigation} = this.props; navigation.navigate('SplashScreenContainer'); }; render() { return ( <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Button onPress={() => this.redirectToSplash()} title='Go To Splash Screen'/> </SafeAreaView> ) } } export default HomeContainer;

现在一切正常，单击/点击按钮时，我可以在 SplashScreen 和 HomeScreen 之间切换。