Question

我正在使用react-navigation 5.x版本，并且尝试为有状态组件中的标题设置右栏按钮，但是失败了。我花了整整一天的时间来解决这个问题，并且对此一无所知。

如果我按如下所示将rightHeader直接包含在堆栈中，则它可以工作。

import React, { Component } from 'react';
import {
  Button
} from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

function MainStackScreen() {
      return (
        <MainStack.Navigator screenOptions={{
              headerStyle: {
                backgroundColor: 'rgb(201, 53, 78)'
              },
              headerTintColor: '#fff',
              headerTitleStyle: {
                fontSize: 18,
                fontWeight: 'bold',
              }
        }}>
          <MainStack.Screen
            name="Home"
            component={HomeScreen}
            options={{ title: 'Home', headerShown: false }}/>
          <MainStack.Screen
            name="Account"
            component={ProfileScreen}
            options={{ title: 'My Profile', headerShown: true, headerBackTitle: 'Back', headerRight: () => (
                <Button
                  onPress={() => alert('This is a button!')}
                  title="Info"
                  color="#fff"
                />
              ) }}/>
          <MainStack.Screen
            name="MenuPackages"
            component={MenuPackageScreen}
            options={{ title: 'Menu Packages', headerShown: true, headerBackTitle: 'Back' }}/>
        </MainStack.Navigator>
      )
    }

如果我尝试在组件的navigationOptions上设置rightHeader，则标题上没有任何显示。

export default class Profile extends Component {
  static contextType = AuthContext

  static navigationOptions = {
    headerRight: () => (
        <Button
          onPress={() => alert('This is a button!')}
          title="Info"
          color="#fff"
        />
      )
  };

  render() {
    return(
      <View>
        <Text>This is a test</Text>
      </View>
    )
  }
}

Answer 1

您可能看不到该按钮，因为它的颜色设置为pip install tensorflow。尝试删除#fff，或更改为其他颜色，看看它是否显示。

ReactNavigation标头右按钮不起作用

1 个答案: