我将所有内容都封装在导航容器中。前5个屏幕设置为底部选项卡导航器。我希望设置屏幕作为一个单独的屏幕，我在配置文件屏幕中单击设置按钮。

const Stack = createStackNavigator();

const RootNavigation = () => {
    return(
        <NavigationContainer>
            <Stack.Navigator screenOptions={{headerShown: false}}>
                <Stack.Screen name="Loop" component={BottomTabNavigator} />
                <Stack.Screen name="Profile" component={BottomTabNavigator} /> //Profile screen is the rendering the "Score" component 
                <Stack.Screen name="Compete" component={BottomTabNavigator} />
                <Stack.Screen name="Diss" component={BottomTabNavigator} />
                <Stack.Screen name="Feedback" component={BottomTabNavigator} />
                <Stack.Screen name="Settings" component={SettingsNavigator} />
            </Stack.Navigator>
        </NavigationContainer>

    );
};

export default RootNavigation;

我创建了一个名为“SettingsNavigator.js”的单独文件

const SettingsNavigator = () => {
    return (
      <Stack.Navigator>
        <Stack.Screen name={"Settings"} component={Settings} />
      </Stack.Navigator>
      
    );
  };
export default SettingsNavigator;

然后在我的screens文件夹中，我有一个呈现SettingsPage的Settings屏幕

const Settings = () => {
    return (
        <View> 
            <SettingsPage />
        </View>
    
    );
};

export default Settings;

我的组件文件夹有如下的SettingsPage

const SettingsPage = () => {
    return (
        <View>
            <Text>Hello this is the settings page</Text>
        </View>
    );
 };
export default SettingsPage;

最后，我的个人资料屏幕上有一个图标touchableopacity按钮，我希望能够按下并呈现设置页面以阅读文本：您好，这是设置页面。但这是当我点击设置按钮时，我得到一个错误阅读：

TypeError：Cannot read property 'navigate' of undefined，js engine：爱马仕

const Score = () => {
return (

    <View style={{
                height: Dimensions.get('window').height, 
                width: Dimensions.get('window').width, 
                backgroundColor: '#1c1c1c'
                }}>
    
        <TouchableOpacity style={styles.settings}>
            <Ionicons 
            name={'settings-outline'} 
            size={30} 
            color='white'
            onPress={() => Navigation.navigate('SettingsPage') }
            />
        </TouchableOpacity>
</View>

    
    );
};

export default Score;