禁用react native上的按钮

Question

我使用文本输入组件来接受来自用户的文本，并且只有当文本输入匹配某个字符串时，按钮才应该被启用。
我可以思考通过在没有TouchableOpactiy包装器的情况下初始渲染按钮，一旦输入字符串匹配，就用包装器重新渲染。
但是我猜有更好的方法来做到这一点。有人能帮忙吗？

Answer 1

这似乎是一种可以用高阶组件解决的问题。虽然我可能是错的，因为我自己正在努力100%地理解它，但也许它会对你有所帮助（这里有几个链接）。。。

• http://www.bennadel.com/blog/2888-experimenting-with-higher-order-components-in-reactjs.htm

Answer 2

就这么做吧

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

Answer 3

TouchableOpacityextenstsTouchableWithoutFeedback，因此您可以只使用disabled属性：

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

React Native TouchableWiathtFeedback#禁用留档

新的可按API也有一个禁用的选项：

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