BorderColor 未在 android 上选择 linearGradient 颜色
BorderColor not picking the linearGradient color on android
我想创建一个圆圈,里面有一个图像,它的边框是彩色的,这就是我使用 LinearGradient 的原因。
我正在使用这个指南:
https://codeburst.io/linear-gradient-for-border-color-in-react-native-5bcab3eea1c9
在 iOS 中它工作正常的问题,正如您在这张图片中看到的那样:
但是在 android 上,当我使用 borderWidth 并选择透明的 borderColor 时,borderColor 看起来像阴影并且出于某种原因没有选择 LinearGradient 颜色...
这里是 android:
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 添加样式:
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',
}
我想创建一个圆圈,里面有一个图像,它的边框是彩色的,这就是我使用 LinearGradient 的原因。
我正在使用这个指南:
https://codeburst.io/linear-gradient-for-border-color-in-react-native-5bcab3eea1c9
在 iOS 中它工作正常的问题,正如您在这张图片中看到的那样:
但是在 android 上,当我使用 borderWidth 并选择透明的 borderColor 时,borderColor 看起来像阴影并且出于某种原因没有选择 LinearGradient 颜色...
这里是 android: 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 添加样式:
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',
}