React-Native：无法找到组件变量。

Question

我正在尝试设置导航系统。使用react navigation api，但出现“无法找到组件变量。”问题。我所做的是...

App.js

import React, {Component} from 'react';
import {createSwitchNavigator, createAppContainer} from 'react-navigation';
import WelcomeScreen from './src/screens/Welcome';
import DashboardScreen from './src/screens/Dashboard';

const appSwitchNavigation = createSwitchNavigator({
  Welcome:{ screen: WelcomeScreen },
  Dashboard:{ screen: DashboardScreen }
});

const AppContainer = createAppContainer(appSwitchNavigation);

class App extends Component {
  render() {
    return <AppContainer/>
  }
}

export default App

Welcome.js

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

export default class WelcomeScreen extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>Welcome</Text>
            </View>
        );
    }
}

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

谁知道我为什么要面对这个错误？ 这是文件结构：

Answer 1

您忘记导入组件

import React, { Component } from 'react';

正确的代码：

App.js

import React,{ Component } from 'react';
import {createSwitchNavigator, createAppContainer} from 'react-navigation';
import WelcomeScreen from './src/screens/Welcome';
import DashboardScreen from './src/screens/Dashboard';

const appSwitchNavigation = createSwitchNavigator({
  Welcome:{ screen: WelcomeScreen },
  Dashboard:{ screen: DashboardScreen }
});

const AppContainer = createAppContainer(appSwitchNavigation);

class App extends Component {
  render() {
    return <AppContainer/>
  }
}

export default App

WelcomeScreen.js

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

export default class WelcomeScreen extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>Welcome</Text>
            </View>
        );
    }
}

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

Answer 2

App.js和Welcome.js中似乎缺少从“反应”导入的组件：

import React, { Component } from 'react'

或者您可以使用：

class App extends React.Component