TouchableHighlight 在 React Native 中默认具有不透明度

Question

无需触摸（默认情况下）可触摸突出显示给了我一个半透明按钮！

      <LoginButton ref={btn => { this.btn = btn; }} onPress={this._executeLoginQuery} text='Sign in'></LoginButton>

在 LoginButton 中呈现为

render () {
  const { icon} = this.props;
    return (
    <TouchableHighlight style={styles.button} onPress={this.props.onPress}>
    <View
    style={{
      flexDirection: 'row',     justifyContent: 'center', alignItems: 'center'   }}>
      <Text style={styles.buttonText}>{this.getText()}</Text>
      </View>
      </TouchableHighlight>
      )
  }
}

与风格

  button: {
    height: 45,
    borderRadius: 100,
    marginHorizontal: Metrics.section,
    marginVertical: Metrics.baseMargin,
    backgroundColor: Colors.blueButton,
    justifyContent: 'center',
    overflow:'hidden',
    opacity: 1.0,
  },

给出结果为：

正如您所看到的，背景“波浪”正在穿过 - 不仅通过按钮，还通过父级白色背景！

我怎样才能阻止这个？

Answer 1

来自反应本机文档：

底层来自将子视图包装在新视图中，这可能会影响布局，如果使用不正确，有时会导致不必要的视觉伪像，例如，如果包装视图的背景颜色未显式设置为不透明颜色。

你能告诉我 Colors.blueButton 的值是多少吗？如果 TouchableHighlight 下的任何子项存在不透明度，请尝试将其删除。

第二种方式

您可以使用 TouchableOpacity 并使用 activeOpacity 属性控制其不透明度。

<TouchableOpacity activeOpacity={0.8}>
    //...login Button view
</TouchableOpacity>