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,
  },

将结果表示为：

正如你可以看到背景＆＃34; wave＆＃34;正在经历 - 不只是通过按钮，而是父母的白色背景！

我该怎么办？

Answer 1

来自本地文档：

底层来自于将子项包装在新视图中，这会影响布局，如果使用不正确，有时会导致不需要的视觉瑕疵，例如，如果包装视图的backgroundColor未明确设置为不透明颜色。

你能告诉我什么是Colors.blueButton的价值。如果在TouchableHighlight下任何孩子都有不透明度，请尝试将其删除。

第二路

您可以使用TouchableOpacity并使用activeOpacity prop。

控制其不透明度

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