javascript - 如何禁用 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}
/>