设置选项卡导航器时出错 - ' 屏幕"主页"的"组件"道具值无效

Question

我目前收到错误"屏幕"主页"的"组件"道具值无效。它必须是有效的 React 组件。我正在尝试将选项卡导航器链接到一系列不同的屏幕。请参阅下面的代码，并提前表示感谢。我显然是初学者哈哈

import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import { create } from 'react-test-renderer';
import HomePage from './Screen/Home'
import FuturePage from './Screen/Future'
const Tabs=createBottomTabNavigator();
export default function App (){
return (  
<NavigationContainer>
<Tabs.Navigator>
<Tabs.Screen name='Home' component={HomePage} />
<Tabs.Screen name='Future' component={FuturePage} />
</Tabs.Navigator>
</NavigationContainer>
);
}

主页屏幕

import React, { Component } from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import Icon from 'react-native-vector-icons/Ionicons';
import {    AppRegistry, 
View, 
Text,
ScrollView, 
Image, 
StyleSheet, 
ImageBackground, 
Animated, Easing
} from 'react-native';
export default class HomePage extends React.Component {
render() {
return(
<View style={styles.container}> 
<ScrollView>
<View
style={[styles.tbcViews, {top: 600}, {left: 25} ]}
/>
<View
style={[styles.tbcViews, {top: 950}, {left: 200} ]}
/>
<View
style={[styles.tbcViews, {top: 1200}, {left: 600} ]}
/>
<View
style={[styles.tbcViews, {top: 600}, {left: 700} ]}
/>
<View
style={[styles.tbcViews, {top: 1400}, {left: 250} ]}
/>
<View
style={[styles.tbcViews, {top: 950}, {left: 900} ]}
/>
<View
style={[styles.tbcViews, {top: 1500}, {left: 1000} ]}
/>
<View
style={[styles.tbcViews, {top: 1100}, {left: 1300} ]}
/>
<View
style={[styles.tbcViews, {top: 400}, {left: 1200} ]}
/>
<View
style={[styles.tbcViews, {top: 1650}, {left: 650} ]}
/>
<View
style={[styles.tbcViews, {top: 1750}, {left: 75} ]}
/>

<Image style={{resizeMode: 'repeat', height:2000, width:1500}}
source={require('./assets/CurtainBG.png')}
/>

</ScrollView>
<Image
style={styles.logo_title}
source={require('./assets/Logo_Title.png')} 
/>  
<Text
style={styles.mini_titles}>FUTURE</Text>
<Text
style={styles.mini_titles2}>PAST</Text>
<Icon 
style={styles.arrows}
name="ios-arrow-up" size={20} />
<Icon 
style={styles.arrowdown}
name="ios-arrow-down" size={20} />
<Image
style={styles.futureicon}
source={require('./assets/FutureIconBlue.png')} 
/>  
</View>
);
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
height: 500,
width:  450,
left: -25
},
logo_title: {
position: 'absolute',
alignItems: 'center',
top:400,
zIndex: 10,
width: 450,
height: 150,
},
mini_titles: {
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
zIndex: 12,
top: 350,
},
mini_titles2: {
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
zIndex: 12,
top: 550,
},
arrows: {
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
zIndex: 12,
top: 300,
},
arrowdown: {
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
zIndex: 12,
top: 600,
},
futureicon: {
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
zIndex: 12,
top: 85,
height: 190,
width: 190

},
tbcViews: {
position: 'absolute',
alignItems: 'center',
zIndex: 10,
width: 200,
height: 200,
borderWidth:2.5,
borderStyle: 'dotted',
borderColor:'rgb(27, 63, 143)',
borderRadius: 10
},
})

Answer 1

如果您不导出组件，也会发生这种情况

检查以下内容

export default HomePage

Answer 2

我遇到了完全相同的问题。经过一整天的工作，我发现您可以使用属性传入class MyComponent extends React.Component或const MyComponent = ({ param1, paramX}) => {}等组件children.首先，我将属性component={MyComponent}用于组件，initalParams={...}用于传递参数，但现在它看起来像这样：

<MyTabStack.Screen
name={item.name.toString()}
listeners={{ focus: () => setActiveTab(index) }}
children={() => (
<MyComponent
data={allResults}
sessionid={item.sessionid}
name={item.name.toString()}
/>
)}
key={item.sessionid}
/>

Answer 3

确保主页是正确的组件。你可以试试这个

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

Answer 4

对于要导入到应用中的每个组件.js请确保导出的组件末尾没有分号。

这解决了我眼前的问题。

Answer 5

const HomeStack = () => {
return (
<Stack.Navigator headerMode = {'none'}>
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
)
};
const ProfileStack = () => {
return (
<Stack.Navigator headerMode={'none'}>
<Stack.Screen name="Profile" component={Profile} />
</Stack.Navigator>
)
};
const SettingsStack = () => {
return (
<Stack.Navigator headerMode={'none'}>
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
)
};
export default { HomeStack, ProfileStack, SettingsStack };

当我导出多个组件时，它会给出该错误 - 但是当我只导出一个组件时，例如：

export default HomeStack;

它工作得很好 - 现在我正在为每个组件创建单独的.js让我们看看会发生什么。

Answer 6

这也发生在我身上.
就我而言，我通过在React Native DevMenu 中禁用缩小来修复它。 在启动 Metro 的控制台中按d。 转到设置> JS 缩小并取消选中它。

Answer 7

import AuthStack from "./Src/Navigation/AuthStack";
import BottomNavBar from "./Src/Navigation/BottomNavBar";

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

就我而言，只是我放了component={ < AuthStack/>}，但实际上，它应该是component={AuthStack}.

Answer 8

确保保存运行组件的文件

Answer 9

似乎Stack.Screen组件的name和component必须相同。这就是对我有用的东西。

const MyStack = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="ContactsScreen"
component={ContactsScreen}
options={{ title: 'Contacts' }}
/>
<Stack.Screen
name="ContactDetailScreen"
component={ContactDetailScreen}
/>
</Stack.Navigator>
</NavigationContainer>
);
};