react-navigation自定义tabbar怎么设置tabbar的背景色是透明的呢，

来源：2-1 react-navigation讲解

慕娘9475393

2018-11-18

老师你好！请教下，使用react-navigation组件时底部的导航菜单背景色怎么设置为透明的呢，这样可以看见页面的内容，像抖音的底部菜单一样，
谢谢！

写回答

1回答

CrazyCodeBoy

2018-11-19

已采纳

可参考：https://github.com/react-navigation/react-navigation/issues/788

lass YourScreen extends React.Component {  render() {    return (      <View
        style={{
          backgroundColor: 'green',
          flex: 1
        }}      >
        <Text style={{ color: 'white' }}>My Application</Text>
      </View>
    );
  }
}const tabOptions = {
  Main: {    screen: YourScreen
  },
  Checkout: {    screen: YourScreen
  },  Location: {    screen: YourScreen
  },
  Settings: {    screen: YourScreen
  }
};const TabbedNavigation = TabNavigator(tabOptions, {
  initialRouteName: 'Main',
  animationEnabled: false,
  swipeEnabled: false,
  lazyLoad: true,
  tabBarOptions: {
    tinColor: '#fff',
    activeTintColor: '#eee',
    inactiveTintColor: '#fff',
    showIcon: true,
    showLabel: true,
    lazyLoad: true,
    upperCaseLabel: false,
    indicatorStyle: {
      backgroundColor: 'transparent'
    },
    style: {
      backgroundColor: 'rgba(22, 22, 22, 0.3)',
      borderTopWidth: 3,
      borderTopColor: '#996600',
      position: 'absolute',
      left: 0,
      right: 0,
      bottom: 0
    }
  }
});export default TabbedNavigation;

慕娘9475393

非常感谢！

2018-11-25

共1条回复

React Native技术精讲与高质量上线App开发

一个真实的上线项目，一次完整的开发过程，全面掌握React Native技术

1577 学习 · 727 问题

查看课程

相似问题

react-native-tab-navigator组件，tab栏透明怎么设置？

回答 2

底部tabBar选中图片颜色怎么改