错误:导航器只能包含'屏幕'组件作为其直接子项

我刚开始使用本机响应,我收到此错误,但我无法解决它。

我正在从主react-navigation page遵循教程,但我无法完成它。

如有任何帮助,我将不胜感激。谢谢!

    import * as React from 'react';
import { Text, View } from 'react-native'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
    return ( <
        View style = {
            { flex: 1, alignItems: 'center', justifyContent: 'center' }
        } >
        <
        Text > Home Screen < /Text> < /
        View >
    );
}

const Stack = createStackNavigator();
export default function App() {
    return ( <
        NavigationContainer >
        <
        Stack.Navigator >
        <
        Stack.Screen name = "Home"
        component = { HomeScreen }
        /> < /
        Stack.Navigator > < /NavigationContainer >
    );
}

Screenshoot error


解决方案

编写时请检查您的代码,如果您使用的是Visual studio,请检查标记和空格,并尽可能将您的标记保持在同一行。使用格式化程序和自动完成标记将有助于您解决问题。 您的代码应如下所示:

import React from 'react';
import { Text, View } from 'react-native'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} >
            <Text> Home Screen </Text>
        </View>
    );
}

const Stack = createStackNavigator();
export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

相关文章