在ReactNative createBottomTabNavigator中设置屏幕标题

问题描述

我正在尝试使用navigator设置导航屏幕的屏幕标题。但这不起作用/更改，也不会引发异常。

场景

我想从Redux加载某些状态，并在用户单击底部选项卡时在导航屏幕中显示漂亮的标题标题。

1. 用户点击底部导航标签中的第二个标签
2. 从Redux加载状态
3. 设置标题标题

期望

我要在屏幕标题中设置以下文本

在屏幕中设置的

headerTitle

实际

我声明我的BottomTabNavigator如下：

import FilterScreen from '../screens/FilterScreen';
import ItemsListScreen2 from '../screens/ItemsListScreen copy';

const BottomTab = createBottomTabNavigator();
const INITIAL_ROUTE_NAME = 'List';

export default function BottomTabNavigator({ navigation,route }) {

  // this code works
  navigation.setOptions({ headerTitle: 'header Set in Navigator' });

  const [isFilterVisible,toggleFilter] = useState(false);

  return (
    <>
      <BottomTab.Navigator
        initialRouteName={INITIAL_ROUTE_NAME}
        tabBarOptions={{
          inactiveBackgroundColor: '#42a5f5',inactiveTintColor: '#ffffff'
        }}
      >
        <BottomTab.Screen
          name="List"
          component={ItemsListScreen}          
          options={{
            title: 'List',tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-calendar" iconType="ion" />,}}
        />
        <BottomTab.Screen
          name="List2"
          headerMode="screen"
          component={ItemsListScreen2}
          screen
          options={{
            title: 'title List2',headerTitle: 'my header title',}}
        />
    ....
      </BottomTab.Navigator>
    </>
  );
}

在上述组件中，我可以使用navigation.setOptions来设置屏幕标题，并且它可以工作。

因此，我尝试执行相同的操作以在headerTitle屏幕中设置List2。但这对屏幕标题没有任何影响。只会将标签的标签更改为“这是标题”。

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

const ItemsListScreen2 = ({ navigation }) => {
    navigation.setOptions({
        headerTitle: `headerTitle set in Screen`,// <-- no effect at the screen level
        title: "this is a title"
    });
return (
    <View>
        <Text>Screen 2</Text>
    </View>
);
}

我试图对传递给组件的navigation对象进行console.log，我可以在这里看到它：

您能帮我解决这个问题，并建议我如何从屏幕上设置标题吗？

由于BottomTabNavigation组件中的路由，我是否需要创建一个新函数（例如getHeaderTitle），加载Redux状态并设置标题？我想保持组件清洁，并且仅在用户导航到屏幕时才加载Redux状态。我想将特定于屏幕的代码保留在其自己的相关屏幕中。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）