在同一组中按不同的 class 时禁用本机反应 classes

Question

我对反应完全陌生，使用 TouchableHighlight，我创建了一个 class，

import React, { Component } from "react";
import { Text, View, Image, TouchableHighlight } from "react-native";
export default class ChooseProComp extends Component {
  render() {
    return (
      <TouchableHighlight
        underlayColor="transparent"
        onPress={this.props.onPress}
        style={{ flex: 1 }}
      >
        <View
          style={{
            marginRight: this.props.mr,
            borderRadius: 3,
            backgroundColor: "#ffffff",
            borderWidth: 0.7,
            borderColor: "#e1e1e1",
          }}
        >
          <View style={{ flexDirection: "row", padding: 8 }}>
            <Image
              style={{
                width: 26,
                height: 26
              }}
              source={this.props.typeImage}
            />
            <Text
              style={{
                fontSize: 13,
                alignSelf: "center",
                marginLeft: 8,
                color: "#737f8d"
              }}
            >
              {this.props.type}
            </Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  }
}

我像这样在不同的组件中导入了 ChooseProComp class，我不确定是否必须添加自定义方法。

<View style={{ flexDirection: "row", marginBottom: 6 }}>
            <ChooseProComp
              mr={7}
              typeImage={require("../../../Images/homescreen/typeicons/medical/medical.png")}
              type="Medical"
              onPress={() => this.renderType("Medical")
            }
            />

            <ChooseProComp
              typeImage={require("../../../Images/homescreen/typeicons/dental/dental.png")}
              type="Dental"
              onPress={() => this.renderType("Dental")}
            />
          </View>
          <View style={{ flexDirection: "row", marginBottom: 6 }}>
            <ChooseProComp
              mr={7}
              typeImage={require("../../../Images/homescreen/typeicons/homiopathi/homia.png")}
              type="Homeopathy"
              onPress={() => this.renderType("Homeopathy")}
            />

            <ChooseProComp
              typeImage={require("../../../Images/homescreen/typeicons/ayurveda/ayurveda.png")}
              type="Ayurveda"
              onPress={() => this.renderType("Ayurveda")}
            />
          </View>
          <View
            style={{ flexDirection: "row", marginBottom: 6, marginBottom: 25 }}
          >
            <ChooseProComp
              mr={7}
              typeImage={require("../../../Images/homescreen/typeicons/yoga/yoga.png")}
              type="Yogic science"
              onPress={() => this.renderType("Yogic science")}
            />

            <ChooseProComp
              typeImage={require("../../../Images/homescreen/typeicons/unani/unani.png")}
              type="Unani"
              onPress={() => this.renderType("Unani")}
            />
          </View>

因此，当我 select 特定类型（例如医疗）时，我想禁用其他类型的 ChooseProComp classes。请帮我解决一下这个。其他类型的不透明度也需要降低。

Answer 1

既然你只是想选择一个项目（<ChooseProComp>），我建议你在你的主要组件状态中简单地处理选择的一个，它在开始时是未定义的：

state = {
  selected: undefined
};

然后定义每个 <ChooseProComp> 的 onPress 函数，例如：

  onPress={() => {
    this.renderType("Medical"); // I don't know how this works so I won't modify it
    if(!this.state.selected){ // if the state is undefined, then set it!
      this.setState({
        selected: "Medical"
      })
    }
  }

然后，再次为每个 <ChooseProComp> 传递一个道具 disabled，例如：

<ChooseProComp
  ...
  disabled={this.state.selected && this.state.selected !== 'Medical'}
/>

因此，在 <ChooseProComp> 组件 (class) 中，您可以在 <TouchableHighlight>:

中使用它

  <TouchableHighlight
    underlayColor="transparent"
    onPress={this.props.onPress}
    style={{ flex: 1 }}
    disabled={this.props.disabled}
  >

让我知道这是否符合您的问题，或者我误解了，或者不够清楚！

在同一组中按不同的 class 时禁用本机反应 classes

Disable react native classes on pressing a different class in the same group

class

react-native

touchablehighlight