Question

我已将createBottomTabNavigator用于选项卡栏。并在通知标签栏上通过自定义构建徽章显示计数。问题是，每当通知更新时，选项卡栏中图标上的计数就不会更改。我必须在其他任何项目上单击以更新计数。我已经使用AsyncStorage将计数存储在Notification Component中，并将该计数存储在在tabnavigator中调用的custome Component中。

class TabNotificationCount extends Component {

    constructor(props) {
        super(props);
        this.state = {
            focus: false,
            notificationCount: 0,
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({ focus: nextProps.isfocus })
        AsyncStorage.getItem('@count', (err, value) => {
            this.setState({ notificationCount: value })
            console.log("value-notification", this.state.notificationCount);
        })
    }

    render() {
        const { notificationCount } = this.state;
        const icon = this.state.focus ? require('../../../images/bell-active.png') : require('../../../images/bell-active.png');
        return (
            <View style={{ flexDirection: 'row' }}>
                <Image source={icon} style={{ width: 22, height: 22, }} />
                <Text style={{ position: 'absolute', top: -10, right: -15, borderRadius: 10, backgroundColor: 'red', color: '#fff', }}>{" " + notificationCount + " "}</Text>
            </View>
        );
    }

}

Answer 1

您在此方面做得很好，它对我有所帮助，还解决了您描述的问题，我所做的是我刷新了导航参数以更新徽章，我不确定它的流程是什么，但是刷新参数确实为我工作。

我在应用程序中有一个购物车页面，该页面允许删除/更新项目以及bottomtabnavigator，因此每次删除/更新项目时，我都需要刷新底部标签购物车图标总数。因此，要实现此目的，我需要通过设置参数值之一来刷新导航参数（我认为这不是正确的方法，但是它确实起作用了。）

下面是我用来解决问题的代码段。

在我的cartIcon.js中

import React, {Component} from 'react';
import {View, TouchableOpacity, ActivityIndicator , Image , AsyncStorage} from 'react-native';
import styles from '../styles';
import Text from '../reuseableComponents/Text';
import Icon from 'react-native-vector-icons/FontAwesome';  

export class IconCart extends Component {


  constructor(props) {
        super(props);
        this.state = {
            // focus: false,
            cartData: [],
        }
  }

   componentWillReceiveProps(nextProps) {
        // this.setState({ focus: nextProps.isfocus })
        AsyncStorage.getItem('cartData', (err, value) => {
            if(value){
                this.setState({ cartData: JSON.parse( value ) })
            }
        })
    }

  render() {
    return (
      <TouchableOpacity 
        activeOpacity={1}
        onPress={()=>{this.props.navigation.navigate('Cart')}}
      >
              { this.state.cartData.length != 0  &&
              <Text
                style={{
                  backgroundColor: 'red',
                  alignSelf: 'flex-end',
                  color: '#fff',
                  fontSize: 8,
                  zIndex: 1,
                  position: 'absolute',
                  width: 15,
                  textAlign: 'center',
                  bottom: 15,
                  height: 15,
                  paddingTop:2,
                  borderRadius: 8,
                  marginLeft:15,
                }}>
                {this.state.cartData.length}
              </Text>
              }            
            <Icon name={"shopping-cart"} color={this.props.color} size={24}/>
       </TouchableOpacity>
    );
  }
}

export default IconCart;

在我的cart.js中

  addQty = async(id) => {
    this.props.dispatch({type: 'CARTACTION', data: id, action: 'add', cartItems: cartData});//to update and refresh state in component
    await AsyncStorage.setItem('cartData', JSON.stringify(cartData));// set data in async storage
    this.props.navigation.setParams({cart: cartData.length});//to refresh navigation params
  };
  minusQty = async(id) => {
    this.props.dispatch({type: 'CARTACTION', data: id, action: 'sub', cartItems: cartData});
    await AsyncStorage.setItem('cartData', JSON.stringify(cartData));
    this.props.navigation.setParams({cart: cartData.length});
  };
  delItem = async(id) => {
    this.props.dispatch({type: 'CARTACTION', data: id, action: 'remove', cartItems: cartData});
    await AsyncStorage.setItem('cartData', JSON.stringify(cartData));
    this.props.navigation.setParams({cart: cartData.length});
  };

在bottomTabnavigator堆栈中的navigator.js中，将购物车插入标签栏图标

    Cart: {
      screen:cartStack,
      navigationOptions:({navigation}) => ({
        tabBarOptions: { 
            activeTintColor: '#142333',
            inactiveTintColor: '#778089',
            // showLabel:false,
            activeBackgroundColor:'#fff',
            inactiveBackgroundColor:'#fff',
            style:{height:64},
            labelStyle:{paddingBottom:10,paddingTop:0,marginTop:0},
        },
        tabBarIcon:({tintColor})=>(  
              // <Icon name="shopping-cart" color={tintColor} size={24}/>  
              <IconCart 
                color={tintColor} 
               />
          )  
       }),
    },

And at the end this is my first stackoverflow answer . So please consider any mistake as a part of a baby step towards community :).

如何在react-native中的Tab Navigator中更新徽章计数器的状态

1 个答案: