用间隔反应本机createBottomTabNavigator

Question

我已经尝试了一段时间了。

我想知道是否有可能在导航栏的侧面和底部之间增加间距，类似于下面的模拟：

谢谢！

Answer 1

您可以轻松地通过样式来实现。

const DEVICE_WIDTH = Dimensions.get('window').width;

tabBarOptions: {
  activeTintColor: '#e91e63',
  labelStyle: {
    fontSize: 12,
  },
  style: {
    backgroundColor: 'red',
    marginLeft:20, // Use margins as you required
    marginRight:20,
    marginBottom:20,
    width: DEVICE_WIDTH - 40, // Or using a percentage as required
    borderRadius:25,
  },
}

或者您可以将已经反应好的组件用作“标签浏览器”。

const tab = createBottomTabNavigator(
{
    tabBarComponent: props =>
      <Component
        style={{ //Styles //}}
      />,
  },
);