如何禁用 touchableOpacity？答案

【问题标题】：How do I disable touchableOpacity?如何禁用 touchableOpacity？
【发布时间】：2018-02-24 08:36:58
【问题描述】：

我正在预约应用程序，我在给定的一天有 6 个时间段。一旦组件加载，选定的插槽就会存储到一个名为“notAvailableSlots”的常量中。如果“notAvailableSlots”中有相应的值，我该如何禁用 touchableOpacity，这意味着有人已经点击了 6 个插槽之一？我知道它需要一个布尔值，但一直在思考要传递什么值......

    const availableHours = {
  timeSlots: {
    slot1: "2:00pm to 2:30pm",
    slot2: "2:30pm to 3:00pm",
    slot3: "3:00pm to 3:30pm",
    slot4: "3:30pm to 4:00pm",
    slot5: "4:00pm to 4:30pm",
    slot6: "4:30pm to 5:00pm"
  }
};

class Appointment extends Component {
  constructor(props) {
    super(props);

    this.state = {
      datePicker: false,
      date: new Date()
    };
  }
  componentDidMount() {
    this.props.fetchDataFromHeroku();
  }

  render() {
    const availability = availableHours.timeSlots;
    const notAvailableSlots = this.props.date
      .filter(date => {
        const month = new Date(date.date).getMonth();
        const day = new Date(date.date).getDate();
        const year = new Date(date.date).getFullYear();
        return (
          month === this.state.date.getMonth() &&
          day === this.state.date.getDate() &&
          year === this.state.date.getFullYear()
        );
      })
      .map(date => date.time_slot);
    // console.log(this.state.date);
    console.log("not available: ", notAvailableSlots);
    return (
      <View style={styles.container}>
        <Text style={{ backgroundColor: "#00CED1", height: 35 }}>
          Hi! Please click on "calendar" to setup an appointment
        </Text>

        <View>
          <Button
            style={styles.buttonOne}
            title="Make an appointment"
            onPress={() => {
              const { action, year, month, day } = DatePickerAndroid.open({
                date: new Date()
              }).then(response => {
                this.setState({
                  datePicker: true,
                  date: new Date(response.year, response.month, response.day)
                });
                response.month += 1;
                console.log("date", response);
              });
            }}
          />
          {this.state.datePicker
            ? Object.keys(availability).map((time, i) => {
                // console.log(time); this returns slots 1 thru 6
                return (
                  <View key={i} style={styles.slotButton}>
                    <TouchableOpacity
                      disabled={true}
                      onPress={() =>
                        this.props.addTimeSlotToDatabase(
                          time,
                          this.props.user.id,
                          this.state.date
                        )
                      }
                    >
                      <Text style={{ alignItems: "center" }}>
                        {availability[time]}
                      </Text>
                    </TouchableOpacity>
                  </View>
                );
              })
            : null}
        </View>
      </View>
    );
  }
}

【问题讨论】：

标签： react-native

【解决方案1】：

只需将值放入状态。

constructor(props) {
    super(props);
    this.state = {
        disabled: false
    };
}

render() {
    return(
        <TouchableOpacity disabled={this.state.disabled}>
            <Text>Click</Text>
        </TouchableOpacity>
    )
}

【讨论】：

【解决方案2】：

有时候我喜欢这样

import { TouchableOpacity, View } from 'react-native';


const MainView = isDisabled ? View : TouchableOpacity;
    return (
      <MainView onPress={}>

【讨论】：