React Native Navigation 錯誤：路由的組件必須是 React 組件

Question

大家好，我是新手，我正在構建一個非常簡單的導航系統，但出現此錯誤。請任何人指導我在此處輸入圖像描述上面附加的屏幕截圖是我在我的物理 android 手機 S7 邊緣上運行的錯誤奧利奧8.0

 ***Homescreen.js*** import React from "react"; import { Text, StyleSheet } from "react-native"; const HomeScreen = () => { return <Text style={styles.text}>Hello World</Text>; }; const styles = StyleSheet.create({ text: { fontSize: 30 } });

 ***App.js*** import { createAppContainer } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; import HomeScreen from './src/screens/HomeScreen' import ComponentsScreen from './src/screens/ComponentsScreen' const navigator = createStackNavigator( { Home: HomeScreen, Components:ComponentsScreen }, { initialRouteName: 'Components', defaultNavigationOptions: { title: "App" } } ); export default createAppContainer(navigator);

 ***ComponentsScreen.js*** import React from 'react' import {Text,StyleSheet} from 'react-native' const ComponentsScreen=function(){ return <Text style={styles.textStyle}>This is the Components Screen</Text> } const styles=StyleSheet.create({ textStyle:{ fontSize:30 } })

Answer 1

我試過你的代碼讓它完美地工作，只需在你的 HomeScreen 和 ComponentsScreen 中添加導出：

import React from "react";
import { Text, StyleSheet } from "react-native";

const HomeScreen = () => {
  return <Text style={styles.text}>Hello World</Text>;
};

export default HomeScreen;
const styles = StyleSheet.create({
  text: {
    fontSize: 30
  }
});

組件屏幕：

import React from 'react'
import {Text,StyleSheet} from 'react-native'

const ComponentsScreen=function(){
    return <Text style={styles.textStyle}>This is the Components Screen</Text>
}

export default ComponentsScreen;
const styles=StyleSheet.create({
    textStyle:{
    fontSize:30
    }
})

並確保您有正確的名稱聲明，您已將 Homescreen 組件聲明為 Homescreen，其中 s 很小，但您正在使用大寫字母導入 App.js，請檢查此。

希望這可以幫助！