如何设置标签栏的样式以反应原生?

时间:2018-04-03 12:59:26

标签: react-native react-native-tabnavigator

enter image description here

有人可以帮助解决这个问题,我使用了反应原生0.54.0, react-native-navigation,我在Android设备上使用它 提前谢谢。

这是标签栏导航器中标签栏的代码.......

const { width, height } = Dimensions.get("window");
      var myTabs = TabNavigator(
       tabs:[
  Setting: {
  screen: SetttingScreen,
  navigationOptions: {
    tabBarLabel: "Settings",

    tabBarIcon: ({ focused }) =>
      focused ? (
        <Image
          style={{ width: 24, height: 24, tintColor: "white" }}
          source={require("./app/components/Screens/Images/setting.png")}
        />
      ) : (
        <Image
          style={{ width: 24, height: 24, tintColor: "white" }}
          source={require("./app/components/Screens/Images/setting.png")}
        />
      ),
    title: "Settings",

    headerTitleStyle: {
      alignSelf: "center",
      color: "white",
      fontWeight: "normal"
    },
    headerStyle: { backgroundColor: "#333333" },
    headerLeft: null,
    headerRight: null
  }
}

这是tab选项的代码 现在有人和我提前谢谢  `{    tabBarPosition:“bottom”,

animationEnabled: true,
swipeEnabled: false,
forceTitlesDisplay: true,

tabBarOptions: {
  pressColor: "blue",
  indicatorStyle: {
    opacity: 0
  },
  allowFontScaling: true,

  upperCaseLabel: false,
  showLabel: true,
  activeTintColor: "blue",
  labelStyle: {
    fontSize: width * 0.022,
    textAlign: "center"
  },
  showIcon: true,
  style: {
    // borderTopWidth: 0,
    backgroundColor: "#221f1f",
    tabBarButtonColor: "#000",
    navBarTextFontSize: 34,
    forceTitlesDisplay: true,
    tabFontFamily: "Avenir-Medium"
  }
}

}`

0 个答案:

没有答案