1

我是全新的反应，使用 TouchableHighlight，我创建了一个类，

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 类，我不确定是否必须添加自定义方法。

<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>

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

4

1 回答 1

1

由于您似乎只想选择一项 ( <ChooseProComp>)，因此我建议您在主组件状态下简单地处理选定的一项，一开始它是未定义的：

state = {
  selected: undefined
};

然后定义每个<ChooseProComp>like的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>组件（类）中，您可以在以下位置使用它<TouchableHighlight>：

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

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

于 2019-03-18T08:45:18.173 回答