如何在反应原生博览会上设置徽章计数

Question

我正在尝试使用 react-native-elements 从图标手动设置徽章。但是是否可以从手动更改为数字计数？我从徽章值设置了这个 +3

这是我的看法

 <View style={styles.container} >
          <TouchableOpacity style={styles.btn2} onPress={this.Process}>
          <FontAwesome name="bell" size={24} color="white"  /> 
          <Badge
    value= "3+" //manual value
    status="error"
    container={{ position: 'absolute', top: -4, right: -4 }}
  />

    </TouchableOpacity>
  <Text style={styles.headerTxt}>Welcome, { this.props.navigation.state.params.UserEmail }  </Text>
  <View style={styles.subView}>
  <TouchableOpacity style={styles.btn} onPress={() => this.props.navigation.navigate('ApplyLoan', {UserEmail: this.props.navigation.state.params.UserEmail})}>
    <Text style={styles.btnTxt}>Apply Loan</Text>
    </TouchableOpacity>
  <TouchableOpacity style={styles.btn} onPress={() => this.props.navigation.navigate('LoanHistory',{UserEmail: this.props.navigation.state.params.UserEmail} )}>
    <Text style={styles.btnTxt}>View Loan History</Text>
  </TouchableOpacity>
 
  </View>
    </View>

有什么建议吗？我想让数字计数，所以当单击铃时数字重置为 0。 谢谢你

Answer 1

试试这个方法

state = { count : 3 };

Process = () => {

  this.setState({count : 0});

}

<TouchableOpacity style={styles.btn2} onPress={this.Process}>
    <FontAwesome name="bell" size={24} color="white" />
    <Badge
      value={`${this.state.count}+`} //manual value
      status="error"
      container={{ position: "absolute", top: -4, right: -4 }}
    />
</TouchableOpacity>