反应导航添加标签标题

Question

我在下面为我的项目添加了标签导航器。

// BottomTabRouter.js
import Message from "../components/message/Message";
import Address from "../components/address/Address";
import Life from "../components/life/Life";
import Personal from "../components/personal/Personal";

const BottomTabRouter = createBottomTabNavigator(
  {
    Message: Message,
    Address: Address,
    Life: Life,
    Personal: Personal
  }
);

根堆栈下的BottomTabRouter。

const DashboardRouter = createStackNavigator({
  Tabs: BottomTabRouter,
  Chat: Chat,
  UserGroup: UserGroup,
});

如果要为“消息”屏幕添加标题，请在下面添加navigationOptions。

class Life extends React.Component {
  static navigationOptions = {
    title: "Life"
  };

  ...
}

但是似乎不起作用，如何以及如何为Life组件添加标题？

Answer 1

我认为您需要使用tabBarLabel属性

class Life extends React.Component {
  static navigationOptions = {
    tabBarLabel: "Life"
  };

  ...
}

Answer 2

似乎对official doc的引用有一个错误，我为我的案子做出了最佳选择。

// Life Router

const LifeRouter = createStackNavigator({
  Life: Life,
  Friends: Friends,
  Find: Find
});

// tabBar hidden configure

LifeRouter.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }

  return {
    tabBarVisible
  };
};

// create a stack under tabNavigator
// so I can add the title navigationOption to the specific screen

const DashboardRouter = createBottomTabNavigator(
  {
    Message: MessageRouter,
    Adress: AddressRouter,
    Life: LifeRouter,
    Personal: PersonalRouter
  },
  ...
);

// hide tab header configure

DashboardRouter.navigationOptions = {
  header: null
};