在屏幕 React Native 之间导航答案

【问题标题】：Navigate Between Screen React Native在屏幕 React Native 之间导航
【发布时间】：2020-12-05 17:58:09
【问题描述】：

我来自 ReactJS，对如何在 react native 中的屏幕之间导航有点困惑。

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

"@react-navigation/native": "^5.8.10", "@react-navigation/stack": "^5.12.8"

所以我已经有 2 个屏幕了：

SplashScreenContainer

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;

HomeScreenContainer

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 中渲染屏幕：

App.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 的屏幕之间导航？

任何帮助将不胜感激。谢谢。

问候

【问题讨论】：

在此处阅读文档reactnavigation.org/docs/navigating 这将帮助您如何在屏幕之间移动。顺便说一句 Text 没有 onPress 属性，你应该使用 Button 或 Touchables 来捕获用户交互
lazy={true}（取决于你的导航 npm 版本）*.com/questions/47890571/…
@Eran 我将 React.lazy 更改为 import 但仍然收到相同的错误消息
可能与 Stack.screen 渲染有关：*.com/a/61262356/205477 我会试试的
@Eran 谢谢，你是对的。堆栈屏幕有问题，所以我做了一些更改。感谢您的提示。

标签： javascript react-native

【解决方案1】：

好吧，我做到了。以下是我所做的更改：

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

App.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 之间切换。

【讨论】：