时间戳

首页 > 解决方案 > 图标颜色在本机基本标题按钮中不起作用

react-native - 图标颜色在本机基本标题按钮中不起作用

问题描述

我正在使用NativeBase Header。在标题中，我有购物车和愿望清单等按钮。但我无法更改该图标的颜色。

这是我的标题代码：

<Header>
  <Left>
    <Button transparent onPress={props.onMenuPress}>
      <Icon type="Ionicons" name="menu" color="#ff0000" />
    </Button>
  </Left>
  <Body>
    <Title>{props.title}</Title>
  </Body>
  <Right>
    <Button transparent onPress={props.onWishlistPress}>
      <Icon name="heart" active={false} color="#ff0000" />
    </Button>
    <Button transparent onPress={props.onCartPress} icon>
      <Icon name="cart" active={false} color="#ff0000" />
    </Button>
  </Right>
</Header>

请任何人都可以告诉我这里有什么问题吗？

标签： react-nativenative-base

解决方案

它显示在Native-base文档中。对于 Icon，Native-base使用React-native-vector-icons模块，它允许您设置colors和sizes通过style.

图标

完美、清晰、高清的图标和像素理想的字体，NativeBase以保持非常高的质量。您将在您的计划中不断拥有像素完美的图标。这是一个列出可用react-native-vector-icons图标系列图标的存储库。回购

使用来自 React Native Vector Icons 的 Ionicons

示例

 <Icon name='home' />
 <Icon ios='ios-menu' android="md-menu" style={{fontSize: 20, color: 'red'}}/>
 <Icon type="FontAwesome" name="home" />

推荐阅读