react-native - TouchableHighlight 的子级在印刷机上失去了不透明样式

Question

当TouchableHighlight的子项具有不透明度时，其不透明度会在 TouchableHighlight 被按下后消失（设置为 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 的完美替代品。

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

• TouchableHighlight 在不活动时总是将孩子的不透明度设置为 1。
• TouchableOpacity 将孩子的不透明度设置为childStyles.opacity如果设置，否则设置为 1，当它处于非活动状态时。

Answer 2

您可以通过实现onPressOutof 的方法TouchableHighlight并将您的 opacity 绑定到 state 属性来解决它。

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

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

不理想我同意。