react-native - 按下时如何禁用TouchableOpacity？反应原生

Question

单击时如何禁用 TouchableOpacity？

这是我的代码：

<TouchableOpacity onPress={() => this._pickupHandler(item.p, deliv.party, index)}>
                                            <View style={styles.carg}>
                                                <Text style={styles.delivered_text}>Ok{deliv.loca} {deliv.addres} {deliv.pos} </Text>
                                            </View>
                                        </TouchableOpacity>

Answer 1

只需将 disabled 道具传递给 TouchableOpacity 作为您的示例

export default class Touchable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      disabled: false,
    };
  }

  onPressButton = (state) => {
    this.setState({
      disabled: state,
    });
  };
  render() {

    return (
      <TouchableOpacity disabled={this.state.disabled} onPress={() => {
        this.onPressButton(true);
        this._pickupHandler(item.p, deliv.party, index)
      }}>
        <View style={styles.carg}>
          <Text style={styles.delivered_text}>Ok{deliv.loca} {deliv.addres} {deliv.pos} </Text>
        </View>
      </TouchableOpacity>
    );
  }
}

Answer 2

好的，所以您需要另一个状态来指示您是否要禁用它。

让我们创建一个状态变量 TODISABLED并最初将其设置为 false 。

现在假设您想在单击 1 后禁用它，您可以通过在单击后将 state 设置为 true 来做到这一点：

<TouchableOpacity disabled={this.state.TODISABLED} onPress={() => {this._pickupHandler(item.p, deliv.party, index);this.setState({TODISABLED:true})}}>
                                            <View style={styles.carg}>
                                                <Text style={styles.delivered_text}>Ok{deliv.loca} {deliv.addres} {deliv.pos} </Text>
                                            </View>
                                        </TouchableOpacity>

希望能帮助到你。随时怀疑