如何在React Native中的工具欄圖標中顯示通知數

Question

我想為我的應用程序創建一個反應本機徽章計數。 我一直在尋找上周沒有任何運氣。 我想做下面的圖片。 任何指導或報告，將不勝感激。

圖片

import React, {Component} from 'react';
import {Image, TouchableHighlight, Button, Platform, StyleSheet, Text, View, AppRegistry} from 'react-native';
import {createStackNavigator, createDrawerNavigator} from 'react-navigation';

const StackNav = createStackNavigator(
  {
   Home:{
  screen: HomeScreen,
  navigationOptions: ({navigation}) => ({
    headerRight: (
      <TouchableHighlight onPress={() => navigation.openDrawer()}>
          <Image source=.{require('./images/baseline_menu_black_48dp.png')} style={{height:50, width:50}}/>
      <Badge count={4}/>
      </TouchableHighlight>
    )
  })
},
 const styles = StyleSheet.Create({
circle:{
width:36,
height:36,
borderRadius:18,   //half radius will make it cirlce,
backgroundColor:'red'
},
count:{color:'#FFF'}
})
const Badge = ({count})=>(
<View style ={styles.cirlce}>
<Text style={style.count}>{count}</Text>
</View>
);

Answer 1

只需創建一個帶有帶有文本圓的組件。

const styles = StyleSheet.Create({
  circle:{
   width:36,
   height:36,
   borderRadius:18   //half radius will make it cirlce,
   backgroundColor;'red'
  },
  count:{color:'#FFF'}
})
const Badge = ({count})=>(
  <View style ={styles.cirlce}>
    <Text style={style.count}>{count}</Text>
  </View>
);

現在只要在任何地方使用

<Badge count={4}/>