react-native - React-Native：找不到组件变量。

Question

我正在尝试设置导航系统。使用反应导航 api但有这个，“找不到组件变量。”问题。我所做的是...

应用程序.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

欢迎.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',
    },
});

有人知道我为什么会遇到这个错误吗？这是文件结构：

标签： react-nativeecmascript-6react-navigation

Answer 1

您忘记导入组件

import React, { Component } from 'react';

正确代码：

应用程序.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',
    },
});