Блог

Я совершенно новичок в react, используя 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 других типов. Пожалуйста, помогите мне с этим. Непрозрачность других типов также должна быть уменьшена.

Поскольку кажется, что вы хотите выбрать только один элемент ( <ChooseProComp> ), я предлагаю вам просто обработать выбранный элемент в состоянии вашего основного компонента, которое вначале будет неопределенным:

 state = {
  selected: undefined
};
  

Затем определите функцию onPress для каждого <ChooseProComp> подобного:

   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> передайте prop disabled типа:

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

Итак, в <ChooseProComp> компоненте (классе) вы можете использовать его в <TouchableHighlight> :

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

Дайте мне знать, соответствует ли это вашему вопросу, или я неправильно понял, или это недостаточно ясно!