Как отобразить количество уведомлений на значке панели инструментов в реагировать родной - PullRequest
Новая
       7

Как отобразить количество уведомлений на значке панели инструментов в реагировать родной

0 голосов
/ 10 сентября 2018

Я хочу создать счетчик собственных значков для своего приложения. Я искал последнюю неделю без удачи. Я хочу сделать что-то вроде изображения ниже. Будем благодарны за любые рекомендации или сообщения.

изображение 

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>
);

1 Ответ

0 голосов
/ 10 сентября 2018

просто создайте компонент, у которого есть круг с текстом. 

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