Ошибка: навигатор может содержать только компоненты Screen в качестве прямых дочерних элементов. - PullRequest
Новая
       142

Ошибка: навигатор может содержать только компоненты Screen в качестве прямых дочерних элементов.

2 голосов
/ 21 июня 2020

Я новичок в React Native и получаю эту ошибку, но не могу ее исправить.

Я следую руководству на главной странице навигации по реакции , но я не могу его завершить.

Буду признателен за любую помощь. Спасибо! 

    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 >
    );
}

Ошибка скриншота

Ответы [ 2 ]

2 голосов
/ 21 июня 2020

Пожалуйста, проверяйте свой код при каждом написании, проверяйте теги и пробелы и держите теги в одной строке, насколько это возможно, если вы используете 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>
    );
}
0 голосов
/ 21 июня 2020

В конце некоторых ваших компонентов есть один лишний пробел. Поместив свой код в мою среду IDE и используя ESLint для его форматирования, я получил следующее: 

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>{' '} // <--- right here
    </View>
  )
}

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

Вы можете увидеть там несколько {' '}. Это лишние пробелы, которых не должно быть. Это то, что говорит ваша ошибка, ' ' был найден после Stack.Screen. Если удалить эти пустые места, вы должны решить вашу проблему. ESLint. отступы - очень важная вещь, позволяющая избежать такого рода ошибок и сделать ваш код более разборчивым.

...