简单组合 react-navigation 上缺少 header 条

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" 没有 header 栏，但 "createStackNavigator" 有 header 栏

你可以试试这个代码

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

应用预览

简单组合 react-navigation 上缺少 header 条

Missing header bar on a simple combination react-navigation

react-native

react-navigation

react-native-paper