禁用反应原生按钮

Question

我正在使用 react native 制作一个 android 应用程序，并且我使用了 TouchableOpacity 组件来创建按钮。

我使用文本输入组件来接受来自用户的文本，并且只有在文本输入与某个字符串匹配 时才应启用 该按钮。

我可以想办法做到这一点，首先在没有 TouchableOpactiy 包装器的情况下渲染按钮，并在输入字符串匹配后使用包装器重新渲染。

但我猜有更好的方法来做到这一点。任何人都可以帮忙吗？

原文由 Jeff P Chacko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

TouchableOpacity 扩展 TouchableWithoutFeedback ，所以你可以只使用 disabled 属性：

 <TouchableOpacity disabled={true}>
  <Text>I'm disabled</Text>
</TouchableOpacity>

React Native TouchableWithoutFeedback #disabled 文档

新的 Pressable API 也有一个 disabled 选项：

 <Pressable disable={true}>
  {({ pressed }) => (
    <Text>I'm disabled</Text>
  )}
</Pressable>

原文由 Julien Deniau 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

就这样做

<TouchableOpacity activeOpacity={disabled ? 1 : 0.7} onPress={!disabled && onPress}>
  <View>
    <Text>{text}</Text>
  </View>
</TouchableOpacity>

原文由 Tallboy 发布，翻译遵循 CC BY-SA 3.0 许可协议