有人幫我解決這個反應原生問題

Question

所以這是我的代碼：

import React from 'react'
import { StyleSheet, View, Text, Button, TextInput, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { Profile } from './HomePageComponents/Profile';

const Tab = createBottomTabNavigator()

function Main() {
    return (
        <View>
            <Text>Main</Text>
        </View>
    )
}

function Home() {
  return (
    <NavigationContainer>
        <Tab.Navigator>
            <Tab.Screen name='Main' component={Main} />
            <Tab.Screen name='Profile' component={<Profile />} />
        </Tab.Navigator>
    </NavigationContainer>
  )
}



export { Home }

這是我的 Profile.js：

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

export function Profile() {
  return (
    <View>
        <Text>Profile Screen</Text>
    </View>
  )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
})

我的問題是，當我嘗試渲染 Home.js 時，我收到一條錯誤消息，提示“屏幕‘配置文件’的‘組件’道具的值無效。它必須是一個有效的 React 組件”，我只是想不通找出我的代碼有什么問題..如果有人可以幫助我，我將不勝感激。

Answer 1

這里的問題是組件

<Tab.Screen name='Profile' component={<Profile />} />

只需刪除 </>

<Tab.Screen name='Profile' component={Profile} />