React Native实现点击5次后禁用TouchableOpacity的方法

核心思路 #

通过在state中维护点击次数计数器，结合加载状态共同控制按钮的禁用状态，同时在请求逻辑里做前置判断，避免无效请求。

步骤1：添加点击计数状态 #

在组件的state中新增clickCount变量，用来记录用户点击按钮的次数，初始值设为0：

constructor() {
  super()
  this.state = {
    loading: false,
    clickCount: 0, // 新增点击计数
    data: {
      postLink: "sample data",
      subreddit: "sample data",
      title: "sample data",
      url: 'https://poster.keepcalmandposters.com/8170567.jpg'
    }
  }
}

步骤2：修改加载逻辑，更新计数 #

修改load方法，每次成功加载后递增计数，同时在请求前判断是否已达5次，避免无效请求：

load = () => {
  // 已加载5个时直接返回，不发起请求
  if (this.state.clickCount >= 5) return;
  
  this.setState({ loading: true })
  axios.get(link).then(res => {
    this.setState(prevState => ({
      data: res.data,
      loading: false,
      clickCount: prevState.clickCount + 1 // 计数+1
    }))
    console.log(Object.keys(res.data))
  }).catch(err => {
    // 请求失败也要重置加载状态
    this.setState({ loading: false })
  })
}

步骤3：控制按钮禁用状态 #

给TouchableOpacity添加disabled属性，当点击次数≥5或处于加载状态时禁用按钮，同时可以通过样式变化让用户直观感知：

<TouchableOpacity 
  style={[
    styles.button,
    // 禁用时改变按钮样式
    (this.state.clickCount >=5 || this.state.loading) && styles.disabledButton
  ]} 
  onPress={() => {this.load()}}
  disabled={this.state.clickCount >=5 || this.state.loading} // 禁用条件
>
  <Text style={styles.btnText}>
    {this.state.clickCount >=5 ? "已加载5个表情包" : "点击加载新表情包!"}
  </Text>
</TouchableOpacity>

可选：添加禁用状态样式 #

在样式中新增禁用状态的样式，提升用户体验：

const styles = StyleSheet.create({
  // 原有样式...
  disabledButton: {
    opacity: 0.5,
    backgroundColor: '#cccccc'
  }
})

内容的提问来源于stack exchange，提问作者Raj