React-Native APP内应用角标，配合TabNavig

业务系统当收到消息后，消息列表会显示具体的消息数量。之前帖子有写过，如果在app应用加消息数量，这个是对应app内显示。
同时tab导航用的是，react-navigation中的TabNavigator。
具体的数量，我放在了redux中，这里测试可以写死。

角标代码

import React from "react";
import {
Text,
View,
} from "native-base";
import {
connect
} from "react-redux";
import {
NativeModules,
Platform
} from "react-native";
import JPushModule from "jpush-react-native";
const badge = NativeModules.Badge;
class NotiTabBarIcon  extends React.Component{
constructor(props) {
  super(props);
}

render() {
return (
  //判断消息数量
  this.props.counter.count>0?<View
    style={{
      position: 'absolute',
      top: 3,
      left:Platform.OS==="ios"?18:8,
      margin: -1,
      minWidth: 13,
      height: 13,
      borderRadius: 7,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#FF0000',
    }}>
      <Text style = {{
        color: '#ffffff',
        textAlign: "center",
        fontSize: 9,
      //超过99就一直显示99
      }}>{this.props.counter.count<99?this.props.counter.count:99}          </Text>
  </View>
  : null
)
}

}

const mapStateToProps = state => ({
  counter: state.counter
})

export default connect(mapStateToProps)(NotiTabBarIcon);

应用导航配置:

import NotiTabBarIcon from "./NotiTabBarIcon";
  
  //配置导航参数，显示数量用到。
  static navigationOptions = ({ navigation, screenProps }) => ({
    tabBarIcon: ({ tintColor,focused }) => (
      focused?
        <View><Icon name="navigate" style={{color:"#119DFF"}}  /><NotiTabBarIcon /></View> : <View ><Icon name="navigate" style={{color:"#C0C0C0"}}  /><NotiTabBarIcon /></View>
    )
});

最终效果

96acd9b919b5142c791145b16ff89d1f (1).gif

整套的流程我是，对接了jpush，通过监听消息，然后存储消息数量到redux，然后动态更新app应用内角标，和app外部桌面的角标。（上一篇帖子可以看到）。ios和安卓都可以用，已经测试通过。
本人QQ337241905，如果有问题，可以联系我。