Question

我使用createBottomTabNaviagtor在页面底部创建选项卡。它工作正常。但是我需要在每个选项卡之间显示边框线。

下面是我使用的代码。我不知道实现tabBarComponent。

const Tabs = createBottomTabNavigator(
{
tab1: {
  screen: tab1,
  navigationOptions: {
    tabBarLabel: "tab1",
    tabBarIcon: ({ tintColor }) => (
      <Image
        source={require("./../css/images/search-vehicle.png")}
        style={[CommonCss.tabIcon, { tintColor: tintColor }]}
      />
    ),
    tabStyle: {
      marginTop: Platform.OS === "ios" ? 0 : 0,
      labelStyle: { fontSize: 10 }
    }
  }
  },
  tab2: {
  screen: tab2,
  navigationOptions: {
    tabBarLabel: "tab2",
    tabBarIcon: ({ tintColor }) => (
      <Image
        source={require("./../css/images/search-vehicle.png")}
        style={[CommonCss.tabIcon, { tintColor: tintColor }]}
      />
    ),
    tabStyle: {
      marginTop: Platform.OS === "ios" ? 0 : 0,
      labelStyle: { fontSize: 10 }
    }
  }
},
{
tabBarOptions: {
  showIcon: true,
  showLabel: true,
  animationEnabled: true,
  upperCaseLabel: false,
  activeBackgroundColor: Colors.white,
  inactiveBackgroundColor: Colors.greyLight,
  activeTintColor: Colors.brandPrimary,
  inactiveTintColor: Colors.textPrimaryDark,
  swipeEnabled: true,
  adaptive: true,
  lazy: true,
  style: {
    backgroundColor: Colors.white,
    borderColor: "gray",
    height: 65,
  },
  indicatorStyle: {
    backgroundColor: Colors.greyLight,
    borderBottomWidth: 4,
    borderColor: '#6C1D7C'
  }
}
}
);

有人可以帮助我使用tabBarComponent来实现选项卡的自定义UI吗？

Answer 1

您可以在tabBarOptions

下添加样式

const Tabs = createBottomTabNavigator({
  Home:{screen:Home},
}, {
  tabBarOptions:{
   tabStyle:{borderColor:'purple', borderWidth:4,},
  }
})

希望有帮助！

需要使用反应导航在选项卡之间实现边框

1 个答案: