Child 的 TouchableHighlight 在按下时失去不透明度样式

Question

当TouchableHighlight的child有不透明度时，按下TouchableHighlight后不透明度消失（设置为1）

最小示例：

<TouchableHighlight onPress={() => {}}>
    <Text style={{ opacity: 0.5 }}>
        Press me!
    </Text>
</TouchableHighlight>

有没有办法解决这个问题，或者这是 React Native 中的错误？

Answer 1

TouchableOpacity works as I would have expected for TouchableHighlight (live code sample)，因此使用 TouchableOpacity 可能是一种解决方法。 请注意，但是，TouchableOpacity 没有激活时出现的底衬，因此无论您在下面渲染什么，都会 "shine through" 按下。因此，它不是 TouchableHighlight 的完美替代品。

我不确定 TouchableHighlight 的行为是否有意为之，某种权衡或实际上是一个错误，但查看代码您可以清楚地看到它在这方面与 TouchableOpacity 有何不同：

Answer 2

您可以通过实施 TouchableHighlight 的 onPressOut 方法并将不透明度绑定到状态属性.

来解决这个问题

constructor (props) {
  this.state = {opacity: 0.5}
}

render () {
  return (
    <TouchableHighlight 
      onPressOut={() => this.setState({opacity: 0.5})}
      opacity={this.state.opacity}
    >
      ....
    </TouchableHighlight>
  );
}

不太理想我同意。

Child 的 TouchableHighlight 在按下时失去不透明度样式

Child of TouchableHighlight loses opacity styling on press

react-native

touchablehighlight