Question

显示透明按钮时出现问题。我使用高程属性作为android的阴影，并且在使用透明度时，我得到了不受欢迎的共和效果。任何建议如何在Android上使用transparecy + shadow，而不是第三方库？

buttonStyle: {
  height: 80,
  width: 220,
  backgroundColor: 'rgba(255, 255, 255, 0.25)',
  justifyContent: 'center',
  alignItems: 'center',
  borderRadius: 20,
  elevation: 10,

}，

Button display

Answer 1

试试这个。我希望这是你所期待的。

  backdrop: {
    paddingTop: 60,
    width: 320,
    height: 120
},
 
buttonTitle: { color: 'white', height: 40, textAlignVertical: 'center' },
buttonView: {
    backgroundColor: 'rgba(0,0,0,0)',
    margin: 10,
    elevation: 7,
},
button: {
    backgroundColor: '#623DEE50',
    alignItems: 'center',
    justifyContent: 'center',
}

   <ImageBackground
                                style={styles.backdrop}
                                source={{ uri: 'https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?w=940&h=650&auto=compress&cs=tinysrgb' }}>
                                <View style={styles.buttonView}>
                                    <View style={styles.button}>
                                        <Text style={styles.buttonTitle}>Button</Text>
                                    </View>
                                </View>
                            </ImageBackground>

React Native：按钮上的高程（阴影）和透明度不能根据需要一起使用

1 个答案: