Expo React Native 错误：元素类型无效：应为字符串（对于内置组件）

Question

我是 React Native 的初学者，所以我正在使用 Expo 并尝试添加 React 导航栏。我不断收到此错误，但我正在导出 App.js

import React from 'react';
import { StyleSheet } from 'react-native';
import {NavigationNativeContainer} from "@react-navigation/native";
import {createStackNavigator} from "@react-navigation/stack"

import SignUp from "./screens/SignupScreen"
import LoginScreen from "./screens/LoginScreen"
import LoadingScreen from "./screens/LoadingScreen"
import HomeScreen from "./screens/HomeScreen"

const Stack = createStackNavigator();

// <View style={styles.container}>
export default function App() {
  return (
    <NavigationNativeContainer>
      <Stack.Navigator>
        <Stack.Screen name="signup" component={SignUp}>
        </Stack.Screen>
        <Stack.Screen name="login" component={LoginScreen}>
        </Stack.Screen>
      </Stack.Navigator>
    </NavigationNativeContainer>

  );
}

我尝试使用的组件例如下面的 LOGINSCREE.JS 是代码

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, KeyboardAvoidingView, Image } from 'react-native';
import { Button, TextInput } from 'react-native-paper';


// <View style={styles.container}>
export default function LoginScreen(props) {
    return (
        <>
            <KeyboardAvoidingView behavior="position">

                <StatusBar style="light" backgroundColor="black" barStyle="light-content" />
                <Image style={styles.logoStyle} source={require('../assets/logoBlack.png')} />


                <Text style={styles.subIntro}>Proceed with your</Text>
                <Text style={styles.intro}> Login</Text>


                <TextInput style={styles.textInpStyle} theme={{ colors: { primary: "red" } }}
                    underlineColor=""

                    label="Email" mode="flat" />
                <TextInput style={styles.textInpStyle} theme={{ colors: { primary: "red" } }}
                    label="Password" mode="flat" />
                <Button style={styles.btnStyle} mode="contained" onPress={() => console.log('Pressed')}>
                    SIGN IN
  </Button>
                <TouchableOpacity>
                    <Text  onPress={()=>props.navigation.navigate("signup")}  style={styles.subText} >I'm a new user <Text style={styles.spIn}> Sign Up</Text> </Text>
                </TouchableOpacity>

            </KeyboardAvoidingView>

        </>
    );
}

我得到的错误是

**错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。 检查App的渲染方法。

This error is located at:
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in DevAppContainer (at AppContainer.js:121)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:293:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:154:27 in invoke
at node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue**

Answer 1

这应该可以工作

将App.js 替换为以下代码：

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import AppNavigator from "./navigation/AppNavigator";

export default function App() {
  return (
    <NavigationContainer>
      <AppNavigator />
    </NavigationContainer>
  );
}

用这个代码替换LoginScreen.js：

import { StatusBar } from "expo-status-bar";
import React from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  KeyboardAvoidingView,
  Image,
} from "react-native";
import { Button, TextInput } from "react-native-paper";

function LoginScreen(props) {
  return (
    <>
      <KeyboardAvoidingView behavior="position">
        <StatusBar
          style="light"
          backgroundColor="black"
          barStyle="light-content"
        />
        <Image
          style={styles.logoStyle}
          source={require("../assets/logoBlack.png")}
        />

        <Text style={styles.subIntro}>Proceed with your</Text>
        <Text style={styles.intro}> Login</Text>

        <TextInput
          style={styles.textInpStyle}
          theme={{ colors: { primary: "red" } }}
          underlineColor=""
          label="Email"
          mode="flat"
        />
        <TextInput
          style={styles.textInpStyle}
          theme={{ colors: { primary: "red" } }}
          label="Password"
          mode="flat"
        />
        <Button
          style={styles.btnStyle}
          mode="contained"
          onPress={() => console.log("Pressed")}
        >
          SIGN IN
        </Button>
        <TouchableOpacity>
          <Text
            onPress={() => props.navigation.navigate("signup")}
            style={styles.subText}
          >
            I'm a new user <Text style={styles.spIn}> Sign Up</Text>{" "}
          </Text>
        </TouchableOpacity>
      </KeyboardAvoidingView>
    </>
  );
}

export default LoginScreen;

const styles = StyleSheet.create({
  container: {},
});

然后创建一个名为 navigation 的文件夹，您 App.js 所在的位置 然后在navigation 文件夹中创建一个名为AppNavigator.js 的文件 然后在AppNavigator.js 里面粘贴这段代码：

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";

import SignUp from "./screens/SignupScreen";
import LoginScreen from "./screens/LoginScreen";
import LoadingScreen from "./screens/LoadingScreen";
import HomeScreen from "./screens/HomeScreen";

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="signup" component={SignUp}></Stack.Screen>
      <Stack.Screen name="login" component={LoginScreen}></Stack.Screen>
    </Stack.Navigator>
  );
}

export default AppNavigator;