如何在 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}/>