在堆栈导航器托管的屏幕内更新 `headerRight`
update `headerRight` inside a screen that is hosted by stack navigator
我创建了一个堆栈导航器:
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?
我最近遇到了类似的问题,因此我不得不在屏幕内更改 header 标题。这可以通过 navigation.setOptions()
.
来完成
例子
这应该在您的 LandingScreen
组件中。
navigation.setOptions({headerRight:() => <NewHeaderRightComponent/>})
我创建了一个堆栈导航器:
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?
我最近遇到了类似的问题,因此我不得不在屏幕内更改 header 标题。这可以通过 navigation.setOptions()
.
例子
这应该在您的 LandingScreen
组件中。
navigation.setOptions({headerRight:() => <NewHeaderRightComponent/>})