自定义TabBar有透明背景吗？

Question

我正在尝试使用react-navigation创建一个透明的底部tabBar。

我正在使用“tabBarComponent：”BottomTabNavigatorConfig。和MyCustomTabBar的背景是透明的。

然而，我在tabbar中获得了白色背景。

const DashboardTabNavigator = createBottomTabNavigator(
  {
    Posts: PostsStack,
    Subreddits: SubredditsScreen,
    Profile: ProfileScreen,
    Inbox: InboxScreen,
    Search: SearchScreen
  },
  {
    animationEnabled: false,
    swipeEnabled: false,
    lazyLoad: true,
    tabBarOptions: {
      tinColor: 'transparent',
      activeTintColor: 'red',
      inactiveTintColor: 'green',
      showIcon: true,
      showLabel: true,
      lazyLoad: true,
      upperCaseLabel: false,
      indicatorStyle: {
        backgroundColor: 'transparent'
      },
      style: {
        backgroundColor: 'rgba(22, 22, 22, 0.6)',
        borderTopWidth: 1,
        borderTopColor: '#996600',
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0
      }
    },
    tabBarComponent: props => <TabBar {...props} />,
    navigationOptions: ({ navigation }) => {
      const { routeName } = navigation.state.routes[navigation.state.index];
      return routeName === 'Posts'
        ? { header: null }
        : { headerTitle: routeName }; // Disabled TabNavigators header for Posts screen cos It has its own header from another stacknavigator.
    }
  }
);

Looks like this

Answer 1

如果提供tabBarOptions，则忽略tabBarComponent。

该问题的解决方案是将以下样式应用于自定义组件的父视图。

style: {
        backgroundColor: 'rgba(22, 22, 22, 0.6)',
        borderTopWidth: 1,
        borderTopColor: '#996600',
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0
      }