React 本机错误：路由 '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'
}
});

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