3

我目前收到错误消息'Get an invalid value for 'component' prop for screen 'Home'。它必须是一个有效的 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
      },

})
4

6 回答 6

8

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

检查以下

export default HomePage
于 2020-10-14T14:19:34.700 回答
7

我有完全相同的问题。经过一整天的工作后，我发现您可以像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}
  />
于 2020-09-18T12:15:32.970 回答
1

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

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

于 2020-05-27T10:27:01.633 回答
1

对于您要导入 app.js 的每个单独的组件，请确保您导出的组件末尾没有分号。

这解决了我的直接问题。

于 2021-08-29T20:49:35.143 回答
0 
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 让我们看看会发生什么。

于 2020-12-21T14:57:38.327 回答
-1

似乎组件的andname必须相同。这对我有用。componentStack.Screen

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="ContactsScreen"
          component={ContactsScreen}
          options={{ title: 'Contacts' }}
        />
        <Stack.Screen
          name="ContactDetailScreen"
          component={ContactDetailScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};
于 2021-01-12T01:58:36.997 回答