React Native React-Navigation：在 Tab Navigator 选项卡中添加徽章答案

【问题标题】：React Native's React-Navigation: Adding a badge in TabNavigator's TabReact Native React-Navigation：在 Tab Navigator 选项卡中添加徽章
【发布时间】：2017-03-02 12:02:37
【问题描述】：

在带有 React-Navigation 的 React-Native 中，我有一个像这样的 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 中完成徽章？

问候

【问题讨论】：

您是否尝试设置overflow: 'hidden'？
谢谢，但同时解决了。

标签： ios react-native tabs badge react-navigation

【解决方案1】：

RN中其实有一个badge-package： https://github.com/react-native-component/react-native-smart-badge.

【讨论】：

为您量身打造 :)

【解决方案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'
        }
})

【讨论】：