如何在反应原生的工具栏图标中显示通知计数

Question

我想为我的应用创建一个反应原生徽章计数。上周我一直在寻找没有任何运气。我想做类似下图的事情。任何指导或报告将不胜感激。

image

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