任何导航器都未处理有效负载 { "name" ： "EditProfileScreen" } 'NAVIGATE'的操作

Question

我遇到以下问题：

The action 'NAVIGATE' with payload {"name":"EditProfileScreen"} was not handled by any navigator.
Do you have a screen named 'EditProfileScreen'?

我的代码：

设置Navigator.js

import React from 'react';
import { createStackNavigator } from "@react-navigation/stack";
import SettingsScreen from "../screens/settingsScreen";
import EditProfileScreen from "../screens/editProfileScreen"
const SettingsStack = createStackNavigator();
const SettingsNavigator = () => (
<SettingsStack.Navigator>
<SettingsStack.Screen name="Settings" component={SettingsScreen} options={{ headerShown: false }} />
<SettingsStack.Screen name="EditProfileScreen" component={EditProfileScreen} options={{ title: 'Edit Profile' }} />
</SettingsStack.Navigator>
)
export default SettingsNavigator

settingScreen.js

import React from 'react';
import { Text, StyleSheet, TouchableOpacity, Linking } from 'react-native';
import { Card } from 'react-native-paper'
import Screen from '../Components/Screen'
function SettingsScreen({navigation}) {
return (
<Screen style={styles.screen}>
<TouchableOpacity onPress={() => navigation.navigate("EditProfileScreen")}>
<Card style={styles.list} >
<Text>Edit Profile</Text>
</Card>
</TouchableOpacity>
</Screen>
)
}
const styles = StyleSheet.create({
list: {
padding: 20,
backgroundColor: 'white',
borderRadius: 5,
marginTop: 10,
},
})
export default SettingsScreen

编辑配置文件屏幕

import React from 'react';
import { Text, StyleSheet} from 'react-native';
import Screen from '../Components/Screen'
function EditProfileScreen({navigation}) {
return (
<Screen style={styles.screen}>
<Text>Edit Profile Screen</Text>
</Screen>
)
}
const styles = StyleSheet.create({

})
export default EditProfileScreen

我试过用NavigationContainer包装我的settingNavigation，但不起作用。

Answer 1

您需要在settingsNavigator.js文件中返回JSX

const SettingsNavigator = () => (
return (
<SettingsStack.Navigator>
<SettingsStack.Screen name="Settings" component={SettingsScreen} options={{ headerShown: false }} />
<SettingsStack.Screen name="EditProfileScreen" component={EditProfileScreen} options={{ title: 'Edit Profile' }} />
</SettingsStack.Navigator>
);
)

Answer 2

const SettingsNavigator = () => {
return <SettingsStack.Navigator>
<SettingsStack.Screen name="Settings" component={SettingsScreen} options={{ headerShown: false }} />
<SettingsStack.Screen name="EditProfileScreen" component={EditProfileScreen} options={{ title: 'Edit Profile' }} />
</SettingsStack.Navigator>
}

添加返回此类型