简单组合反应导航上缺少标题栏

Question

我想试试react-navigation 中的MaterialBottomTabNavigator 选项。不幸的是，似乎永远不会显示顶部栏，尽管它应该根据文档。

import React from "React";

import { Text, View } from "react-native";
import { createAppContainer } 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>
    );
  }
}

export default createAppContainer(createMaterialBottomTabNavigator(
  {
    S1: {
      screen: HomeScreen,
    },
    S2: {
      screen: HomeScreen,
    },
  }
),
);

我有什么明显的遗漏吗？

Answer 1

“createMaterialBottomTabNavigator”默认没有标题栏，但“createStackNavigator”有标题栏

你可以试试这个代码

import React from "React";

import { Text, View } from "react-native";
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: HomeScreen
  }
});

const Tab2 = createStackNavigator({
  S2: {
    screen: HomeScreen
  }
});

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

应用预览