如何使用导航器代码上的 headerRight 导航到其他屏幕？

Question

标题很乱，但我给出的解释会更清楚。我正在为我的应用程序创建一个 StackNavigator，并且我正在定义一个图标以显示在我的其中一个屏幕的 header 上，如下所示：

const navigator= createStackNavigator(
  {
    Initial: {
      screen: Posts,
      navigationOptions: {
        title: "All Posts",
        headerRight: () => {
          return (
            <TouchableOpacity style={{ padding: 5 }}>
              <Feather name={"plus"} size={30} />
            </TouchableOpacity>
          );
        },
      },
    },
    Details: Details,
    Create: Create,
  },
  {
    initialRouteName: "Initial",
  }
);

const App = createAppContainer(navigator);

export default () => {
  return (
    <Provider>
      <App />
    </Provider>
  );
};

问题是当用户按下我在 header 右侧呈现的图标时，我想将用户导航到 Create 屏幕，但我不知道如何访问导航器为所有屏幕生成的 navigation.navigate() 函数。我知道我可以在帖子的屏幕文件上定义 header，所以我可以访问 navigation.navigate() 函数，但我想知道是否在 App.js 文件中有一些方法可以做到这一点。

编辑

阅读文档后我发现我创建导航器的方式不是官方文档推荐的方式。我通过一门旧课程学会了这样做，使用 React Navigation 4.x，现在使用 React Navigation 6.x 我察觉到创作的不同并改变了我在我的应用程序上做这件事的方式.您可以查看我遇到的问题的文档 here

Answer 1

您可以通过发送道具以这种方式准备您的导航选项

    options={(props) => ({
headerRight: () =>  <TouchableOpacity 
             onPress={()=>props.navigation.navigate('Screen')} style={{ padding: 5 }}>
                  <Feather name={"plus"} size={30} />
                </TouchableOpacity>
              })}

如何使用导航器代码上的 headerRight 导航到其他屏幕？

How to navigate to other screen using the headerRight on the navigator code?

react-native

react-navigation

react-native-navigation

stack-navigator