堆栈导航器标题右侧的按钮上的navigation.navigate

Question

首先，我遇到与Button linking in headerRight相同的问题。但是他们的解决方案只是在functional上使用component。我不能简单地切换到functional代码，因为我需要使用componentDidMount，所以我确实需要基于component的{​​{1}}导航用法的解决方案。

堆栈

headerRight

BottomTabs

  function MyStack() {
    return (
      <Stack.Navigator>
        <Stack.Screen
          name="Root"
          component={BottomTabs}
          options={{
            headerRight: ({ navigation }) => (
              <View>
                <Button
                  onPress={() => navigation.navigate('Profile')}
                </Button>
              </View>
            ),
          }}
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    );
  }

这将带来一个错误，提示导航在那里不可用。好的，因为您不能直接在Stack Navigator的定义中使用导航。

即使使用：

const BottomTabs = createBottomTabNavigator();
function MyTabs() {
  return (
    <BottomTabs.Navigator
    ...

没有帮助，因为该组件上仍然没有可用的导航。

This的信息量太少，但已经朝着正确的方向发展。最后，this给了我关于滥用BottomTab定义headerRight的想法。

Answer 1

堆栈

headerRight: () => {
   return <ProfileButtonScreen/>
}, 

底部标签

  function MyStack() {
    return (
      <Stack.Navigator>
        <Stack.Screen
          name="Root"
          component={BottomTabs}
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    );
  }

现在，您可以在堆栈导航标题上拥有一个可点击的按钮。