React native 反应导航：从标题中的按钮导航到不同的屏幕

我的标题右侧有一个图标，按下该按钮后，我想导航到另一个屏幕

我对此进行了大量搜索，但所有的解决方案都是针对类组件的，并且没有关于它的正式文档

我使用的是react原生版本0.61.4

按下右侧标题中的图标时，我想移动“ProfileScreen”。所有其他导航都正常工作。我在“主屏幕”中有一个按钮，可以移动到“结果屏幕”，但无法从标题转到“配置文件屏幕”

下面是我的代码片段

const Stack = createStackNavigator();

const App = () => {
    return (
        <SafeAreaView style={{ flex: 1 }}>
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen 
                        name="Home" 
                        component={HomeScreen}
                        options={
                            {
                                title: 'Home',
                                headerStyle: {
                                    backgroundColor: '#273469',
                                },
                                headerTintColor: '#EBF2FA',
                                headerRight: () => (
                                    <Icon
                                      onPress={() => navigate('ProfileScreen')}
                                      name="edit"
                                      type="material"
                                    />
                                ),
                            }
                        }
                    />
                    <Stack.Screen 
                        name="ResultsScreen" 
                        component={ResultsScreen}
                    />
                    <Stack.Screen 
                        name="ProfileScreen"
                        component={ProfileScreen}
                    />
                </Stack.Navigator>
            </NavigationContainer>
        </SafeAreaView>
    )
}

const Stack=createStackNavigator（）；
常量应用=（）=>{
返回(
(
导航（'ProfileScreen'）}
name=“编辑”
type=“材料”
/>
),
}
}
/>
)
}

选项

可以将函数作为参数，此函数将

道具

作为参数

这是你的电话号码

以下是有关信息的TypeScript定义：

     * Navigator options for this screen.
     */
    options?: ScreenOptions | ((props: {
        route: RouteProp<ParamList, RouteName>;
        navigation: any;
    }) => ScreenOptions);

---

我花了一段时间才找到：）为什么我们从“（（{navigation}）=>@hakiko.the

（）

是

{return}

的语法糖。在这个例子中，它与

{navigation}）=>{return title..}

选项={{{navigation}=>（{headerTitle:}）相同当我尝试向自定义标题组件添加导航时，

不起作用

 options={({ navigation }) => ({
              title: 'Home',
              headerStyle: {
                backgroundColor: '#273469',
              },
              headerTintColor: '#EBF2FA',
              headerRight: () => (
                <Icon
                  onPress={() => navigation.navigate('ProfileScreen')}
                  name="edit"
                  type="material"
                />
              ),
            })}