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" />}
/>

Answer 2

plz在ActionBarImages中添加图标，并在Icon.js中添加图标键

node_module/react-native-action-bar的所有变化

如何添加购物车图标反应本机操作栏？

2 个答案: