我遇到了以下问题:
The action 'NAVIGATE' with payload {"name":"EditProfileScreen"} was not handled by any navigator.
Do you have a screen named 'EditProfileScreen'?
我的代码:
设置导航器.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
settingsScreen.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
editProfileScreen
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
我试着把我的
settingNavigation
在一个
NavigationContainer
,但这行不通。