BorderColor没有在Android上选择linearGradient颜色 [英] BorderColor not picking the linearGradient color on android

问题描述

我正在尝试创建一个内部带有图像的圆，该图像的边框是彩色的，这就是为什么我使用LinearGradient.

Im trying to create a circle with an image inside it that its border is colourful that's why I used LinearGradient.

我正在使用本指南:

https://codeburst.io/linear反应本机5bcab3eea1c9中渐变色的边界颜色

在iOS中可以正常工作的问题，如该图所示:

the problem that in iOS its working fine as you can see in this image:

https://imgur.com/a/Tz0uEcC

但是在android上，当我使用borderWidth并选择透明的borderColor时，borderColor看起来像阴影，并且由于某种原因未选择LinearGradient颜色...

but on android the when I use borderWidth and choosing borderColor of transparent the borderColor looks like shadow and not picking the LinearGradient color from some reason...

这是机器人: https://imgur.com/a/qG1LJBt

我在做什么错了?

        <LinearGradient
          colors={['#ac8af8', '#cca5e7']}
          start={{ x: 0.0, y: 1.0 }} end={{ x: 1.0, y: 1.0 }}
          style={styles.profilePhotoContainer}
        >
          <TouchableOpacity onPress={this.handleEditProfileImage.bind(this)}>
            <Image
          style={[styles.profileImage]}
          source={this.state.profilePhoto}
        />
          </TouchableOpacity>
        </LinearGradient>

const styles = StyleSheet.create({
profilePhotoContainer: {
    zIndex: 5,
    position: 'absolute',
    top: Dimensions.get('window').height * .13,
    left: Dimensions.get('window').width / 2 - Dimensions.get('window').width * .13,
    elevation: 4,
    borderRadius: 75,
    borderWidth: 4,
    overflow: "hidden" ,
    borderColor: 'transparent',
  },
profileImage: {
    zIndex: 5,
    width: 100,
    height: 100,
    borderWidth: 1,
    borderColor: 'transparent',
    backgroundColor: '#FFF',
    flex:1,
    resizeMode:'contain',
  },

})

感谢您的帮助

推荐答案

您应该在TouchableOpacity中添加样式:

You should add style to the TouchableOpacity:

style={{
  width: 100,
  height: 100, backgroundColor: 'transparent', overflow: "hidden", borderRadius: 50, flex: 1}}

另外将profilePhotoContainer的样式更改为:

in addition change the style of profilePhotoContainer to:

profilePhotoContainer: {
    zIndex: 5,
    position: 'absolute',
    top: Dimensions.get('window').height * .13,
    left: Dimensions.get('window').width / 2 - Dimensions.get('window').width * .13,
    elevation: 4,
    borderRadius: 75,
    padding: 5,
    overflow: "hidden",
    borderColor: 'transparent',
  }

这篇关于BorderColor没有在Android上选择linearGradient颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！