react本机页脚图标

Question

我喜欢和安卓的IOS一样的风格。你可以在IOS中看到中间的图标很不错，但在android中就不好了

​

​

​

​

我使用的代码是这样的

  <Footer style={{ backgroundColor: "#FFFFFF" }}>
    <FooterTab style={{ backgroundColor: "#FFFFFF" }}>
      <Button onPress={() => { Actions.Startpage();}}>
        <Icon name="search" size={30} color="#3ba936" />
      <Text style={styles.smalltext} numberOfLines={1}>Ontdekken</Text>
      </Button>
      <Button onPress={() => { Actions.ThemasPage();}}>
        <Icon name="id-card" size={30} color="#3ba936" />
      <Text style={styles.smalltext} numberOfLines={1}>Thema's</Text>
      </Button>
      <Button  style={{marginBottom:20, borderRadius:50, height: 90, backgroundColor: '#FFFFFF', overflow: 'visible'}} onPress={() => { Actions.EventPage();}}>
        <Icon name="calendar-plus-o" size={50} color="#3ba936" />
      <Text style={styles.smalltext} numberOfLines={1}>Evenementen</Text>
      </Button>
      <Button onPress={() => { Actions.Wildpage();}}>
        <Icon name="binoculars" size={30} color="#e50040" />
      <Text style={styles.smalltext} numberOfLines={1}>100% Wild</Text>
      </Button>
      <Button onPress={() => { Actions.MenuPage();}}>
        <Icon name="bars" size={30} color="#3ba936" />
      <Text style={styles.smalltext} numberOfLines={1}>Menu</Text>
      </Button>
    </FooterTab>
  </Footer>

Answer 1

这是因为按钮比容器大。

在iOS中，它将是可见的，但在android上，容器会裁剪任何溢出的内部元素。

您可以做的是更改页脚上的高度，使其等于中间的按钮，并确保其他按钮的高度较小，以提供相同的效果，而不会溢出到父组件之外。

对于灰色线条，您可以添加高度为1且全宽的视图