如何添加購物車圖標反應原生操作欄？

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圖標。 唯一預定義的圖標是：后退，標志，加載，位置，菜單，電話，加號，開始和星形輪廓。 在這里查看 。

而且，該庫不支持react-native-vector-icons 。

在您的情況下，我建議您使用react-native-elements Header組件：

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

要將徽章添加到您的圖標，可以使用徽章組件 ：

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

請在ActionBarImages添加圖標，並在Icon.js添加圖標鍵

兩者都在node_module/react-native-action-bar更改