javascript - 如何添加购物车图标 react native 操作栏？

Question

我正在为我的应用程序标题使用 react-native-action-bar ，这里是我需要添加购物车图标...我尝试了所有正确的方法，但无法获得任何添加的解决方案带有计数项目的购物车图标...如果有人对此有任何想法，请告诉我。

我使用了 rightIcons，但图标有限，并且缺少购物车图标，我还需要使用该图标添加购物车数量。

<ActionBar
  containerStyle={{height:60}}
  backgroundColor={'#d7b655'}
  title={'Home'}
  titleStyle={styles.pageTitle}
  leftIconName={'menu'}
  onLeftPress={() =>           
      this.props.navigation.dispatch(DrawerActions.openDrawer())
  }
  rightIcons={[
      {
          name: 'cart',
          badge: '1',
          onPress: () => console.log('cart !'),
      },
  ]}
  rightIconImageStyle={{tintColor: 'green'}}
  rightIconContainerStyle={{Top:200}}
/>

它应该显示一个购物车图标，其中包含具有动态计数结果的总项目数。

Answer 1

不幸的是，react-native-action-bar 不支持 cart 图标。唯一预定义的图标是:返回、标记、加载、位置、菜单、电话、加号、开始和星形轮廓。查看here .

此外，库不支持 react-native-vector-icons .

在您的情况下，我建议您使用 react-native-elements 标题组件:

<Header
  centerComponent={{ text: 'Home', style: { color: '#fff' } }}
  rightComponent={{ icon: 'shopping_cart', color: '#fff' }}
/>

要为您的图标添加徽章，您可以使用 badge component :

import { Badge, Icon, withBadge } from 'react-native-elements'
...
const BadgedIcon = withBadge(1)(Icon);

在组合中，它看起来像这样:

<Header
    centerComponent={{ text: 'Home', style: { color: '#fff' } }}
    rightComponent={<BadgedIcon type="material" name="shopping_cart" />}
/>