在堆栈导航器托管的屏幕内更新 `headerRight`

Question

我创建了一个堆栈导航器：

import {createStackNavigator} from '@react-navigation/stack';

const TheStack = createStackNavigator();

然后，我在这个导航器下有一个LandingScreen：

<TheStack.Navigator ...>
  <TheStack.Screen
        name="LandingScreen"
        component={LandingScreen}
        options={{
          title: '',
          headerLeft: null,
          headerRight: () => (
            <MyHeaderRightComponent />
          ),
        }}
      />

<TheStack.Navigator>

正如你在屏幕上的options中看到的那样，有headerRight，我已将MyHeaderRightComponent声明为headerRight，以便显示在屏幕上 header 的右侧。

这是我的 LandingScreen.js :

import React, {useState} from 'react';
import {View, StyleSheet} from 'react-native';

const LandingScreen = ({navigation}) => {
   // How can I access the `headerRight` here to update the `headerRight` to another component? 
   ...
}

我的问题是如何访问 LandingScreen.js 中的 headerRight 以便更新 headerRight 以显示不同的内容我的组件 header?

Answer 1

我最近遇到了类似的问题，因此我不得不在屏幕内更改 header 标题。这可以通过 navigation.setOptions().

来完成

例子

这应该在您的 LandingScreen 组件中。

navigation.setOptions({headerRight:() => <NewHeaderRightComponent/>})

在堆栈导航器托管的屏幕内更新 `headerRight`

update `headerRight` inside a screen that is hosted by stack navigator

react-native

react-native-navigation

react-navigation

例子