Question

我正在尝试使用react-navigate v5为某些屏幕设置堆栈导航器。目前，我在尝试运行该应用时遇到此错误：enter image description here

我的App.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>
);

我的Screens.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';

找不到“首页”屏幕的“组件”或“儿童”道具

1 个答案: