在本机导航不起作用

Question

我试图在我的应用程序中打开另一个屏幕，但出现错误：

“路线'Profile'的组件必须是React组件。”

这是App.js文件：

    import {StackNavigator} from 'react-navigation';
    import {StyleSheet, View, Button, AppRegistry} from 'react-native';
    import Profile from '../AwesomeProject';

    export default class App extends React.Component{
        render(){
            return(
                <View style={styles.container}>
                    <Button style = {styles.button} onPress={() => this.props.navigation.navigate('Profile')}/>
                </View>
            );
        }
    }

    const screens = StackNavigator({
        Home: {screen: App},
        Profile: {screen: Profile}
    })

    AppRegistry.registerComponent('AwesomeProject', () => screens);

这是Profile.js文件：

import {StackNavigator} from 'react-navigation';
import {StyleSheet, Text, View, Button, Image, TextInput} from 'react-native';

export default class Profile extends React.Component{
    render(){
        return(
            <View style={styles.container}>
            </View>
        );
    }
}

我没有包括缩短代码的样式。

Answer 1

您从错误的位置导入配置文件组件。

在App.js上

import Profile from '../AwesomeProject'; // Change this line to the right profile component location

Answer 2

我认为这不是导入Profile组件的有效方法，除非您要从index.js文件中导出它。

从“ ../AwesomeProject”导入配置文件；

因此，请尝试： import Profile from '../AwesomeProject/Profile'; 代替。