React native 反应导航集标题不起作用

我创建了两个选项卡

以下是我的反应导航配置设置：

导航器/index.ts

import { createAppContainer, createSwitchNavigator } from 'react-navigation';

import RootScreen from '../components/RootScreen';
import MainStack from './MainStack';

const RootStack = createSwitchNavigator(
  {
    RootScreen: RootScreen,
    MainStack: MainStack
  },
  {
    initialRouteName: 'RootScreen',
  }
)


const AppContainer = createAppContainer(RootStack);

export default AppContainer;

导航器/MainStack.ts

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

const MainStack = createStackNavigator(
  {
    tabs: TabsStack,
  },
  {
    // headerMode: 'none',
  }
);

export default MainStack;

导航器/TabsStack.tsx

import React from 'react';
import { Image } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation-tabs';

import HomeScreen from '../components/HomeScreen/HomeScreen';
import SettingScreen from '../components/SettingScreen/SettingScreen';

import LoveIcon from '../assets/image/heart.png';

const TabsStack = createBottomTabNavigator(
  {
    HomeScreen: {
      screen: HomeScreen,
      navigationOptions: {
        title: 'Home',
        tabBarLabel: 'HomeTab',
        tabBarIcon: ({ focused, tintColor }) => {
          return <Image {...with some props}/>
        },
      }
    },
    SettingScreen: {
      screen: SettingScreen,
      navigationOptions: {
        tabBarLabel: 'STab',
        tabBarIcon: ({ focused, tintColor }) => {
          return <Image {...with some props}/>
        },
      }
    },
  },
  {
    tabBarOptions: {
      showLabel: true,
      activeTintColor: 'blue',
      inactiveTintColor: 'black',
      style: {
        // with some style
      }
    },
  }
);

export default TabsStack;

我的主屏幕标题显示

选项卡

看起来

静态导航选项

不起作用

我的react导航设置有什么问题？

请使用以下方法：

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

class HomeScreen extends React.Component {
  componentDidMount() {
    this.props.navigation.setOptions({ title: 'HomeScreen Header' });
  };

  render() {
    return (
      <View>
        <Text>I am HomeScreen</Text>
      </View>
    );
  }
}

export default HomeScreen;

从“React”导入React；
从“react native”导入{View，Text}；
类主屏幕扩展了React.Component{
componentDidMount（）{
this.props.navigation.setOptions（{title:'HomeScreen Header'}）；
};
render（）{
返回(
我是主屏幕
);
}
}
导出默认主屏幕；

只是想知道，当您已经使用

tabBarLabel:'HomeTab'，

定义了组件时，为什么要在组件中更改它？你可以直接提供那里需要的任何东西。嗯<代码>选项卡标签：“HomeTab”是我的选项卡底部标题，我的问题是我想设置标题栏标题。哦，好的！我之前没有注意到。我以为你只是在问tabs的标签。

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

class HomeScreen extends React.Component {
  componentDidMount() {
    this.props.navigation.setOptions({ title: 'HomeScreen Header' });
  };

  render() {
    return (
      <View>
        <Text>I am HomeScreen</Text>
      </View>
    );
  }
}

export default HomeScreen;