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不支持购物车图标。唯一预定义的图标是:后退、标志、加载、位置、菜单、电话、加号、开始和星形轮廓。查看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" />}
/>