react-navigation设置标题不工作。

Question

我创建了两个标签。

这是我的react-navigation配置设置。

navigatorindex.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;

navigatorMainStack.ts

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

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

export default MainStack;

navigatorTabsStack.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;

我尝试在我的HomeScreen.tsx上通过使用 static navigationOptions

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

    class HomeScreen extends React.Component {
      static navigationOptions = {
        title: 'HomeScreen Header',
      };

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

    export default HomeScreen;

我的HomeScreen头显示 tabs.

它看起来像 static navigationOptions 无法使用。

我的react-navigation设置有什么问题？

Answer 1

就用这种方式。

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;