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

【问题标题】：How to navigate to other screen using the headerRight on the navigator code?如何使用导航器代码上的 headerRight 导航到其他屏幕？
【发布时间】：2021-03-22 23:55:01
【问题描述】：

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

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>
  );
};

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

编辑

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

【问题讨论】：

我认为 App.js 文件是唯一的入口点，它指向您声明整个导航流程的 navigator 文件。
@SiddharthPatel，检查 Niranjan 的答案。

标签： react-native react-navigation react-native-navigation stack-navigator

【解决方案1】：

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

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

【讨论】：

你能解释一下为什么选项对象内的函数在大括号之前有括号吗？ (道具) => ({...})
只是因为使用括号将直接返回 headerRight 而如果我没有使用括号我应该返回它。如果省略括号，箭头函数有一个简洁的主体，它只包含一个表达式，其结果将隐式地成为函数的返回值。