如何在 react-native 中定位标签导航器

Question

我正在尝试格式化选项卡导航器，以便它在应用程序中显示得更多。这就是现在的样子

我想弄清楚如何降低标签，以便在 iPhone X 等某些手机上不会被阻止。我尝试使用 position 道具来做到这一点，但是它的白色条保持静止，只有标签标签等向下移动。

这是用于设置选项卡导航器样式的代码

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";
import SearchScreen from "./src/screens/SearchScreen";
import Loading from "./src/components/Loading";
import PickerList from "./src/components/PickerList";
import Summary from "./src/components/Summary";
import Timeline from "./src/components/Timeline";
import {
  createStackNavigator,
  createAppContainer,
  createMaterialTopTabNavigator,
  createSwitchNavigator
} from "react-navigation";
// import ResultsScreen from "./src/screens/ResultsScreen";
const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu"
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return <AppContainer />;
  }
}

const ResultsTabNavigator = createMaterialTopTabNavigator(
  {
    Summary: Summary,
    Timeline: Timeline
  },
  { // used to style the Tab
    initialRouteName: "Summary",
    tabBarPosition: "top",
    swipeEnabled: true,
    animationEnabled: true,
    tabBarOptions: {
      activeTintColor: "rgba(230,230,250,0.4)",
      inactiveTintColor: "rgba(230,230,250,0.4)",
      style: {
        backgroundColor: "rgba(230,230,250,0.4)",
        position: "relative"
      },
      labelStyle: {
        textAlign: "center"
      },
      indicatorStyle: {
        borderBottomColor: "#87B56A",
        borderBottomWidth: 2
      }
    }
  }
);

const AppStackNavigator = createStackNavigator(
  {
    Home: SearchScreen,
    Picker: PickerList,
    Summary: ResultsTabNavigator
  },
  {
    headerMode: "none",
    initialRouteName: "Home",
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: "orange"
      }
    }
  }
);
const AppContainer = createAppContainer(AppStackNavigator);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 600,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

Answer 1

我不太确定我们的设置有什么不同，除了我们使用的是 bottomTabBar 而不是您的顶部栏，但是 React Navigation 为我们提供了安全区域视图更改标签栏。

也就是说，React Native 0.50+ 带有一个 SafeAreaView 组件，您可以用它来包装组件。或者，您可以使用反应导航 SafeAreaView 组件。它应该添加必要的填充来移动您的内容 down/up 以避免 'horns' 和底栏。阅读 React Navigation 文档 here:

或者，您可以使用 react-native-device-info 包来使用它的 hasNotch() 方法 - 这会发现很多带有凹口的设备，例如 iphonex，但不是全部 - 例如 ipad亲第3代。然后您可以有条件地应用填充以将您的内容从 'horns' 和底栏后面移动。

增加 padding 后，您可能还需要同样增加组件的高度。

如何在 react-native 中定位标签导航器

how to position a tab navigator in react-native

react-native

react-native-ios

react-navigation