BorderColor 没有在 android 上选择 linearGradient 颜色答案

【问题标题】：BorderColor not picking the linearGradient color on androidBorderColor 没有在 android 上选择 linearGradient 颜色
【发布时间】：2019-10-15 22:02:08
【问题描述】：

我试图创建一个圆圈，里面有一个图像，它的边框是彩色的，这就是我使用 LinearGradient 的原因。

我正在使用本指南：

https://codeburst.io/linear-gradient-for-border-color-in-react-native-5bcab3eea1c9

如您在这张图片中看到的那样，它在 iOS 中工作正常的问题：

https://imgur.com/a/Tz0uEcC

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

这里是安卓： 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',
  },

})

感谢您的帮助

【问题讨论】：

标签： android css react-native linear-gradients border-color

【解决方案1】：

你应该给 TouchableOpacity 添加样式：

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

另外将profilePhotoContainer的样式改为：

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

【讨论】：