路由“WELCOME”的组件必须是 React 组件

Question

我有点确定导出-导入做得很好，因为我使用导出默认值。 当我在同一页面中同时拥有注册和登录表单时，这是一个有效的代码。 现在我想通过两个按钮导航到两个不同的页面，它在 loginIndex.js 中给了我这个错误，这是我创建 NavigationStack 的文件。 事实上，在将两个新文件添加到堆栈之前它运行良好，但现在它告诉我 'Welcome' 不是 React 组件。

依赖关系

src 

/components

   /screens

     /welcome

        /index.js
 
     /sign_up

        /SignUp.js

     /login

        /login.js

/routes
 
  /loginStack.js

index.js

// @flow

import React, { Component } from 'react';
import {
  TouchableOpacity,
  StatusBar,
  Animated,
  FlatList,
  Image,
  View,
  Text,
  YellowBox,
} from 'react-native';


import Loading from '~/components/common/Loading';

import {withNavigation} from 'react-navigation';

import Navigation from '~/routes/loginStack'

import ROUTE_NAMES from '~/routes/loginStack'


const Welcome = ({navigation}) => {
 

  onClickLoginButton = (): void => {
    const navigation = this.props.navigation
    navigation.navigate(ROUTE_NAMES.LOGIN)
  };

  onClickSignUpButton = (): void => {
    const navigation = this.props.navigation
    navigation.navigate(ROUTE_NAMES.SIGNUP)


  };

  onLoadBackgroundImage = (): void => {
    this.setState({
      isBackgroundImageLoaded: true,
    });
  };

    return (

      
      <Container>
        <Navigation/>
        <Loading />
        <StatusBar
          backgroundColor="transparent"
          barStyle="light-content"
          translucent
          animated
        />
        <BackgroundImage
          onLoad={this.onLoadBackgroundImage}
        />
        {isBackgroundImageLoaded && (
          <Wrapper>
            <TitleWrapper>
              <Title></Title>
            </TitleWrapper>
            <NavigationTitleWrapper>
              <TouchableOpacity
                onPress={this.onClickLoginButton}
              >
                <Animated.Text
                >
                  Accedi
                </Animated.Text>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={this.onClickSignUpButton}
              >
                <Animated.Text>
                  Registrati
                </Animated.Text>
              </TouchableOpacity>
            </NavigationTitleWrapper>
            
          </Wrapper>
        )}
      </Container>
    );
  }


export default withNavigation(Welcome);

 

loginStack.js

import { createSwitchNavigator, createAppContainer } from 'react-navigation';

import Welcome from '../components/screens/welcome/index';
import MainStack from './mainStack';
import Login from '~/components/screens/log_in/Login';
import SignUp from '~/components/screens/sign_up/SignUp';

export const ROUTE_NAMES = {
  LOGIN: 'LOGIN',
  MAIN_STACK: 'MAIN_STACK',
  WELCOME: 'WELCOME',
  SIGNUP: 'SIGNUP',
};

const LoginStack = createSwitchNavigator(
  {
    [ROUTE_NAMES.WELCOME]: {
      screen: Welcome,
    },
    [ROUTE_NAMES.LOGIN]: {
      screen: True_login,
    },
    [ROUTE_NAMES.SIGNUP]: {
      screen: SignUp,
    },
    [ROUTE_NAMES.MAIN_STACK]: {
      screen: MainStack,
    },
  },
  {
    initialRouteName: ROUTE_NAMES.SPLASH,
  },
);

const AppContainer = createAppContainer(LoginStack);

export default AppContainer;

Answer 1

您正在使用“setState”，但使用的是功能组件。
您应该改用钩子..
此外，您使用“this”，但同样与课程相关..
您正在添加打字稿注释，但使用 javascript..

尝试把索引文件改成这样：

import React from 'react';
import {
    TouchableOpacity,
    StatusBar,
    Animated
} from 'react-native';


import Loading from '~/components/common/Loading';

import { withNavigation } from 'react-navigation';

import Navigation from '~/routes/loginStack'

import ROUTE_NAMES from '~/routes/loginStack'


const Welcome = ({ navigation }) => {

    const [isBackgroundImageLoaded, setIsBackgroundImageLoaded] = React.useState(false);

    onClickLoginButton = () => {
        navigation.navigate(ROUTE_NAMES.LOGIN)
    };

    onClickSignUpButton = () => {
        navigation.navigate(ROUTE_NAMES.SIGNUP)
    };

    onLoadBackgroundImage = () => {
        setIsBackgroundImageLoaded(true);
    };

    return (


        <Container>
            <Navigation />
            <Loading />
            <StatusBar
                backgroundColor="transparent"
                barStyle="light-content"
                translucent
                animated
            />
            <BackgroundImage
                onLoad={onLoadBackgroundImage}
            />
            {isBackgroundImageLoaded && (
                <Wrapper>
                    <TitleWrapper>
                        <Title></Title>
                    </TitleWrapper>
                    <NavigationTitleWrapper>
                        <TouchableOpacity
                            onPress={onClickLoginButton}
                        >
                            <Animated.Text
                            >
                                Accedi
                </Animated.Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                            onPress={onClickSignUpButton}
                        >
                            <Animated.Text>
                                Registrati
                </Animated.Text>
                        </TouchableOpacity>
                    </NavigationTitleWrapper>

                </Wrapper>
            )}
        </Container>
    );
}

export default withNavigation(Welcome);