业务系统当收到消息后，消息列表会显示具体的消息数量。之前帖子有写过，如果在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，如果有问题，可以联系我。
