Question

标题很混乱，但我给出的解释会更清楚。我正在为我的应用程序创建一个 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

Answer 1

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

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

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

1 个答案: