Реагируйте с навигацией и добавьте заголовок вкладки

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,
});

Если я хочу добавить заголовок для экрана сообщений, ядобавьте навигационные опции ниже.

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

  ...
}

Но, похоже, это не работает, как и что я могу сделать, чтобы добавить заголовок для моего компонента Life?

Answer 1

Похоже, есть ошибочная ссылка на официальный документ , и я делаю лучший выбор для своего случая.

// 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
};

Answer 2

Я думаю, вам нужно использовать tabBarLabel свойство

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

  ...
}