React Native Navigation Title

Question

一个看似简单的问题：反应导航中的标题标题

带有我的底部标签的导航器文件

const BottomTabNavigator = createMaterialBottomTabNavigator(
  {
    ToFind: {
      screen: TopBarNavigator,
      navigationOptions: {
        title: "Discover",
        tabBarIcon: (tabInfo) => {
          return (
            <Ionicons
              name="md-search"
              size={25}
              color={tabInfo.tintColor} //prende lo stesso colore di tintcolor giù
            />
          );
        },
        tabBarColor: "#27ae60",
        activeColor: "white",
      },
    },

....

const Navigator = createStackNavigator({
  BottomTabNavigator,
Detail: DetailScreen, // not visible but I need the navigation
  Item: ItemDisplay,  // not visible but I need the navigation
});

现在我尝试将名称设置到页面中（在底部）

MapScreen.navigationOptions = (navData) => {
  return {
    headerTitle: "Map",
  };
};

执行此操作时，我具有所需的底部选项卡样式和导航，但是我无法更改标题标题（导航标题），但我总是看到BottomTabNavigator看起来真是把戏，还是我误会了某个地方？任何想法？谢谢

Answer 1

createMaterialBottomTabNavigator默认情况下没有标题栏，但是createStackNavigator有。

您可以做这样的事情。

import React from "React";
import { createAppContainer, createStackNavigator } from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const Tab1 = createStackNavigator({
  S1: {
    screen: ToFind,
    navigationOptions: {
        title: "Discover",
        tabBarIcon: (tabInfo) => {
          return (
            <Ionicons
              name="md-search"
              size={25}
              color={tabInfo.tintColor} //prende lo stesso colore di tintcolor giù
            />
          );
        },
        tabBarColor: "#27ae60",
        activeColor: "white",
      },
  }
});

const Tab2 = createStackNavigator({
  S2: {
    screen: ToFind,
    navigationOptions: {
        title: "Discover",
        tabBarIcon: (tabInfo) => {
          return (
            <Ionicons
              name="md-search"
              size={25}
              color={tabInfo.tintColor} //prende lo stesso colore di tintcolor giù
            />
          );
        },
        tabBarColor: "#27ae60",
        activeColor: "white",
      },
  }
  }
});

export default createAppContainer(
  createMaterialBottomTabNavigator({
    Tab1,
    Tab2
  })
);