如何禁用 react-native-elements 复选框 touchableopacity？答案

【问题标题】：How to disable react-native-element's checkbox touchable opacity?如何禁用 react-native-elements 复选框 touchableopacity？
【发布时间】：2019-07-03 11:33:24
【问题描述】：

实际上，我使用的是 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 })}
/>;

【问题讨论】：

标签： javascript react-native react-native-elements

【解决方案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 })}
/>;

【讨论】：

我在上面添加了，但是错误找不到变量：TouchableWithoutFeeback
您还需要在文件顶部导入此组件：import { TouchableWithoutFeedback } from 'react-native'
是的，它的工作原理我发现了另一种方式，比如 activeOpacity={1}

【解决方案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 })}
/>

【讨论】：

react-native-training.github.io/react-native-elements/docs/…没有这样的属性activeOpacity
这个组件使用了一个组件 (react-native-elements.github.io/react-native-elements/docs/…)，它使用了一个 activeOpacity 属性。这个答案很好。
这样的 hack 不适用于打字稿。但是如果我们忽略 typescript 简单属性 disabled 工作得很好
谢谢 - 它对我的 Button 有效。出于某种奇怪的原因，他们的文档没有将它列为它适用的所有组件的道具。（例如，ButtonGroup 已在文档中列出，但未在 Button.reactnativeelements.com/search?q=activeopacity 中列出）

【解决方案3】：

文档中没有提到这个，但是有一个可用的props "disabled"

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：