React Native的React-Navigation：在TabNavigator的选项卡中添加徽章

Question

React-Native with React-Navigation我有一个像这样的Tabnavigator：

const testScreenNavigator = TabNavigator({
    Tab1: { screen: Tab1Screen },
    Tab2: { screen: Tab2Screen },
    Tab3: { screen: Tab3Screen },
});
testScreenNavigator.navigationOptions = {
    title: 'MY TITLE',
    header: {
        titleStyle:{
        },
        style:{
// how to set the options?
        },
    }  
}

现在我想在Tab1旁边添加徽章：例如

Tab1（2）| Tab2 | TAB3

在Android中，这可以通过以下方式完成：

 static navigationOptions = {

     tabBar: {
          label: () => {
                ... 
                return (
                   <Text style={{ backgroundColor: '...', borderRadius: 10}}>
                       {badgeNumber}
                   </Text>
                ...

在iOS中，它会在底部显示TabMenu，这是好的，因为它是iOS的本机行为。但在iOS中，徽章的圆圈不显示，而是显示矩形背景。

为什么这样和/或如何在iOS中完成徽章？

此致

Answer 1

RN实际上有一个徽章包： https://github.com/react-native-component/react-native-smart-badge。

Answer 2

import React, {Component } from 'react';
import {Animated ,Text,View,AppRegistry,Button, StyleSheet,Image } from 'react-native';

//  Badge 
export default class App extends Component {
    state = {
        badgeScale : new Animated.Value(0),
        textValue :0,
    }

    animatedBadge(){
        this.state.badgeScale.setValue(0);
        const newTextValue = ++this.state.textValue
        this.setState({textValue: newTextValue})
        Animated.timing(this.state.badgeScale , {
                toValue : 1,
                duration : 500
        }).start()
    }

    render(){
        const msize = 40;
        return(
            <View style={styles.container}>
                <View style={{ width :100, height :100, borderRadius :50, margin:10,}}>
                 <View
                            style={{ width :100, height :100, backgroundColor:'green', borderRadius :50,}}
                        /> 
                    {/* <Image
                          source={require('./circle.png')} // style={imageStyle}
                            style={{ width :100, height :100, borderRadius :50,}}
                        /> */}
                        <Animated.View style={{
                                position: 'absolute', width:msize, height:msize,
                                borderRadius:msize/2, backgroundColor:'black',
                                justifyContent:'center', alignContent:'center', 
                                borderColor:'green',borderWidth:1, 
                                // left:0, top:0,
                                left:70, top:0,     
                                // using this change bedge position 
                                    transform:[
                                        {
                                                scale:this.state.badgeScale
                                        }
                                    ]
                            }}>
                            <Text style={{backgroundColor :'transparent' ,                                  
                                            textAlign:'center',
                                        color:'red'}}>
                                    {this.state.textValue}
                            </Text>
                        </Animated.View>
                        <Button style={{ flex:1 , marginTop:50,justifyContent:'center',
                                                        alignContent:'center', }} 
                                                        title='Add' 
                                         onPress={ () =>this.animatedBadge() }>
                        </Button>                                                   
                </View>
            </View>
            );
        }
}
const styles = StyleSheet.create({
        container:{
            flex:1,
            justifyContent:'center',
            alignItems :'center',
            // backgroundColor:'#F5FCFF'
        },
        imageStyle :{
            width:200,
            height:200,
        },
        viewTextStyle:{
            position : 'absolute',
            justifyContent:'center',
            alignItems:'center',
        },
        textStyle:{
            fontSize:23,
            fontWeight:'bold',
            color:'white'
        }
})