反应导航V5标头按钮的用法

Question

我的反应导航屏幕如下。

<Stack.Screen name="Home" component={HomeScreen} />

我需要使用右侧标题按钮浏览另一个屏幕，我该怎么做。 我正在使用React Navigation V5

Answer 1

这可能有帮助

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerTitle: props => <LogoTitle {...props} />,
          headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="#fff"
            />
          ),
        }}
      />
    </Stack.Navigator>
  );
}

您还可以使用screenOptions

screenOptions={({route, navigation}) => ({
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerRight: () => (
      <Button
        // only alert is ok, the other is error.
        onPress={() => navigation.navigate('Home')}
        title="Logout"
        color="#fff"
      />
    ),

    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  })}