javascript - React Native 错误：路由“Home”的组件必须是 React 组件

Question

目前我的代码有一个大问题，而且我知道，有很多与我的问题相同的请求。我尝试了很多解决方案，但没有任何帮助。也许有人可以帮助我:)

我在标题中提到了这个问题：

Error: The component for route 'Home' must be a React component. For
example:

import MyScreen from './MyScreen'; ... Home: MyScreen, }

You can also use a navigator:

import MyNavigator from './MyNavigator'; ... Home: MyNavigator, }

这是我在指定文件中的代码：

App.js

import React from 'react'; import { View, Text, Button } from 'react-native'; import { createAppContainer } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack';
import Home from './src/Home'; import Profile from './src/Profile';

const Navigator = createStackNavigator({ Home: { screen: Home }, Profile: { screen: Profile }, }, { initialRouteName: 'Home', });
const App = createAppContainer(Navigator);

export default App;

Home.js

import React from 'react'; import { StyleSheet, View, Button } from 'react-native';

export default class Home extends React.Component {

    static navigationOptions = {
        title: 'Home', };
    
    render() {
    
        const { navigate } = this.props.navigation;
    
        return (
            <View style={styles.container}>
    
                <Button
                    title="Go to profile screen"
                    onPress={() => navigate(
                        'Profile', { name: 'Jane' }
                    )}
                />
                
            </View>
        );
    
    }

}

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

Profile.js

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

export default class Profile extends React.Component {

static navigationOptions = ({ navigation }) => {
    return {
        title: navigation.getParam('name'),
    };
};

render() {

    const { navigate, state } = this.props.navigation;

    return (
        <View style={styles.container}>

            <Text>Hello {state.params.name}</Text>

            <Button
                title="Go to home screen"
                onPress={() => navigate('Home')}
            />

        </View>
    );

}
}

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

标签： javascriptreact-native

Answer 1

请确保您的项目中具有以下结构：

App.js 在您的项目文件夹中。src 文件夹中的 Home.js 和 Profile.js。

App.js（在 ./ 文件夹中）

import React from 'react'; 
import { View, Text, Button } from 'react-native'; 
import { createAppContainer } from 'react-navigation'; 
import { createStackNavigator } from 'react-navigation-stack';
import Home from './src/Home'; 
import Profile from './src/Profile';

const Navigator = createStackNavigator({ Home: { screen: Home }, Profile: { screen: Profile }, }, { initialRouteName: 'Home', });
const App = createAppContainer(Navigator);

export default App;

Home.js（在 ./src 文件夹中）

import React from 'react'; import { StyleSheet, View, Button } from 'react-native';

export default class Home extends React.Component {

    static navigationOptions = {
        title: 'Home', };
    
    render() {
    
        const { navigate } = this.props.navigation;
    
        return (
            <View style={styles.container}>
    
                <Button
                    title="Go to profile screen"
                    onPress={() => navigate(
                        'Profile', { name: 'Jane' }
                    )}
                />
                
            </View>
        );
    
    }

}

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

Profile.js（在 ./src 文件夹中）

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

export default class Profile extends React.Component {

static navigationOptions = ({ navigation }) => {
    return {
        title: navigation.getParam('name'),
    };
};

render() {

    const { navigate, state } = this.props.navigation;

    return (
        <View style={styles.container}>

            <Text>Hello {state.params.name}</Text>

            <Button
                title="Go to home screen"
                onPress={() => navigate('Home')}
            />

        </View>
    );

}
}

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

如果您正确放置所有文件，它将起作用。

请点击以下链接查看结果：

http://www.createchhk.com/2020_12_30_01_56_22.mp4