Question

我试图在我的反应应用程序中打开一个不同的屏幕，但我收到一个错误：

＆＃34;路线的组件＆＃39;简介＆＃39;必须是React组件。＆＃34;

这是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文件中导出它。

从＆＃39; ../ AwesomeProject＆＃39;;`

导入个人资料

所以，请尝试：import Profile from '../AwesomeProject/Profile';。

react-native中的导航不起作用

2 个答案: