可触摸高亮的子项在印刷机上失去不透明度样式

Question

当可触摸高亮显示的子项具有不透明度时，按下可触摸高光后其不透明度将消失（设置为 1）。

此处运行示例：https://rnplay.org/apps/c0NIjQ

最小示例：

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

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

Answer 1

TouchableOpacity

的工作方式与我对 TouchableHighlight （实时代码示例）的预期相同，因此使用 TouchableOpacity 可能是一种解决方法。但是请注意，TouchableOpacity没有在活动时显示的底图，因此无论您在下面渲染什么，都会在印刷机上"闪耀"。因此，它不是TouchableHighlight的完美替代品。

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

• 当孩子的非活动状态时，可触摸突出显示始终将孩子的不透明度设置为 1。
• "可触摸不透明度"将子项的不透明度设置为childStyles.opacity（如果已设置），否则设置为 1，当子项处于非活动状态时。

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>
  );
}

不理想，我同意。