React-Native APP内应用角标，配合TabNavigator2018-10-26

业务系统当收到消息后，消息列表会显示具体的消息数量。之前帖子有写过，如果在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?
      {this.props.counter.count<99?this.props.counter.count:99}          
  
  : null
)
}

}

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

export default connect(mapStateToProps)(NotiTabBarIcon);

应用导航配置:

import NotiTabBarIcon from "./NotiTabBarIcon";
  
  //配置导航参数，显示数量用到。
  static navigationOptions = ({ navigation, screenProps }) => ({
    tabBarIcon: ({ tintColor,focused }) => (
      focused?
         : 
    )
});

最终效果

96acd9b919b5142c791145b16ff89d1f (1).gif

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