React native：如果未默认导出功能组件，如何导入

Question

我无法将“登录”屏幕从index.js文件移动到Screens.js文件 我一直在遵循默认的反应导航文档，并且在运行第一个示例后，我将HomeScreen重命名为SignIn。这工作了。对我来说，第二步是将SignIn屏幕从index.js移到Screens.js

这有效

index.js

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

//import { SignIn } from "./Screens";

export const SignIn = () => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Sign in</Text>
    </View>
  );
}


const AuthStack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <AuthStack.Navigator>
        <AuthStack.Screen name="SignIn" component={SignIn} />
      </AuthStack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Screens.js

import Rreact from "react";
import { View, Text } from "react-native";

export const SignIn = () => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Sign in</Text>
    </View>
  );
};

---

这不起作用

我试图像这样使用Screens.js文件中的SignIn组件

import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import { SignIn } from "./Screens";

const AuthStack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <AuthStack.Navigator>
        <AuthStack.Screen name="SignIn" component={SignIn} />
      </AuthStack.Navigator>
    </NavigationContainer>
  );
}

export default App;

这是错误

有人可以向我解释我在想什么吗？

Answer 1

在Screens.js中，更改以下行

import Rreact from "react";

到

import React from "react";