如何禁用 react-native-element 的复选框可触摸不透明度？

Question

实际上，我使用的是 react-native-element 设计语言。 当我用来实现复选框时，它的行为就像我不想要的可触摸不透明度。

<CheckBox
  containerStyle={{ backgroundColor: "transparent", borderWidth: 0 }}
  center
  size={14}
  title="vegetarian"
  textStyle={{
    fontSize: theme.FONT_SIZE_X_SMALL,
    fontWeight: theme.FONT_WEIGHT_LIGHT
  }}
  checkedColor="red"
  checked={this.state.checked}
  onPress={() => this.setState({ checked: !this.state.checked })}
/>;

Answer 1

您可以传递一个Component道具（默认为TouchableOpacity ），例如使用TouchableWithoutFeedback作为值。

<CheckBox
  Component={TouchableWithoutFeedback}
  containerStyle={{ backgroundColor: "transparent", borderWidth: 0 }}
  center
  size={14}
  title="vegetarian"
  textStyle={{
    fontSize: theme.FONT_SIZE_X_SMALL,
    fontWeight: theme.FONT_WEIGHT_LIGHT
  }}
  checkedColor="red"
  checked={this.state.checked}
  onPress={() => this.setState({ checked: !this.state.checked })}
/>;

Answer 2

我们可以通过另一种方式来实现activeOpacity={1} ，如下所示。

<CheckBox
  activeOpacity={1}
  containerStyle={{ backgroundColor: "transparent", borderWidth: 0 }}
  center
  size={14}
  title="vegetarian"
  textStyle={{
    fontSize: theme.FONT_SIZE_X_SMALL,
    fontWeight: theme.FONT_WEIGHT_LIGHT
  }}
  checkedColor="red"
  checked={this.state.checked}
  onPress={() => this.setState({ checked: !this.state.checked })}
/>

Answer 3

这在文档中没有提到，但是有一个可用的道具

    <CheckBox
          disabled={true}
          title={l.name}
          checked={!!indexCheckBox.includes(i)}
          checkedIcon="dot-circle-o"
          uncheckedIcon="circle-o"
          checkedColor="#6cc49a"
          uncheckedColor="#6cc49a"
          onPress={() => onPressCheckBox(i)}
        />

Answer 4

对于 Button，我只使用了下面一个它对我有用。 如果没有，请告诉我。

import { TouchableOpacity } from "react-native";
import { Button } from "react-native-elements";

<Button
      TouchableComponent={TouchableOpacity}
      title="Next"
      raised
      activeOpacity={1}
/>

Answer 5

<TouchableWithoutFeedback
                      style={{
                        flex: 1,
                      }}>
                      <CheckBox
                        disabled={false}
                        boxType={'square'}
                        value={this.isChecked(item._id)}
                        onCheckColor={COLORS.SWDarkBlue}
                        onFillColor={COLORS.SWLightBlue}
                        tintColors={{
                          true: COLORS.SWDarkBlue,
                          false: '#4445',
                        }}
                        onTintColor={COLORS.SWDarkBlue}
                        onValueChange={value =>
                          this.onToggleCheckBox(item._id)
                        }
                        style={checkBoxContainer}
                      />
                    </TouchableWithoutFeedback>