错误：导航器只能包含&#39；屏幕&#39；组件作为其直接子项

Error: A navigator can only contain #39;Screen#39; components as its direct children(错误：导航器只能包含#39；屏幕#39；组件作为其直接子项)

问题描述

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

我正在从主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>
    );
}

这篇关于错误：导航器只能包含&#39；屏幕&#39；组件作为其直接子项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！