Не удалось найти опору 'component' или 'children' для экрана 'Home'

Question

Я пытаюсь использовать react-navigate v5 для настройки stacknavigator для некоторых экранов. В настоящее время я получаю эту ошибку при попытке запустить приложение: введите описание изображения здесь

Мое приложение. js:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import SignIn from './App/Screens';

const AuthStack = createStackNavigator();

export default () => (
  <NavigationContainer>
    <AuthStack.Navigator>
      <AuthStack.Screen name='SignIn' component = {SignIn} />
    </AuthStack.Navigator>
  </NavigationContainer>
);

мои экраны. js:

import React from 'react';
import {View, Text, StyleSheet, Button, TouchableOpacity } from 'react-native';

const styles = StyleSheet.create({
    container: {
        padding: 20,
        justifyContent: 'center',
    },
    input: {
        height: 40,
        backgroundColor: "rgba(255, 255, 255, 0.2)",
        marginBottom: 10,
        color: '#FFF',
        paddingHorizontal: 10
    },
    buttonContainer: {
        backgroundColor: '#2980b9',
        paddingVertical: 10,
        marginBottom: 10

    },
    buttonText: {
        textAlign: 'center',
        color: '#FFF',
        fontWeight: '700'
    }
});

const ScreenContainer = ({ children }) => (
    <View style={styles.container}>{children}</View>
  );
export const SignIn = ({ navigation }) => {  
    return (
      <ScreenContainer>
        <Text>Sign In Screen</Text>
        <Button title="Sign In" onPress={() => alert("todo") } />
        <Button
          title="Create Account"
          onPress={() => alert("todo")}
        />
      </ScreenContainer>
    );
  };

Не уверен, что происходит, был бы признателен за помощь. Спасибо!

Answer 1

Вы должны изменить свой импорт, поскольку вы используете именованный экспорт

import SignIn from './App/Screens';

на

import {SignIn} from './App/Screens';