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组件。它应该添加必要的填充以上下移动您的内容，以避免出现“喇叭”和底部栏。阅读React Navigation文档here:

或者，您可以使用react-native-device-info程序包使用其hasNotch()方法-这会发现很多带有缺口的设备，例如iphonex，但不是全部-例如第三代ipad pro 。然后，您可以有条件地应用填充，以将内容从“角”和底部栏的后面移出。

一旦增加了填充，您可能还需要同样地增加组件的高度。

如何将标签导航器放置在react-native中

1 个答案: