Кнопка ReactNavigation headerRight не работает - PullRequest
Новая
       5

Кнопка ReactNavigation headerRight не работает

0 голосов
/ 24 марта 2020

Я использую версию response-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>
      )
    }

Ничего не отображается в заголовке, если я пытаюсь установить rightHeader для navigationOptions компонента. 

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