我正在尝试将我的图像放在已经在其他视图上的视图上,但是没有成功...
我一直在尝试使用position:'absolute'
以及我见过的更多其他选项,但对我而言不起作用。
render() {
let locationFlag=Platform.OS === 'ios'?true:false
return (
<View style={styles.container}>
<LinearGradient
colors={[ '#75a4e7','#7d50f6']}
start={{x: .2, y: 1}}
end={{x:.8,y:0}}
locations={locationFlag?[.15,1]:[.18,2.1]}
style={styles.gradient}>
<View style={styles.profilePhotoContainer}>
<TouchableOpacity onPress={this.handleEditProfileImage.bind(this)}>
<Image
style={styles.profileImage}
source={this.state.profilePhoto}
/>
</TouchableOpacity>
</View>
</LinearGradient>
<View style={
[styles.profileBox]}
>
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignSelf: 'stretch',
backgroundColor: Colors.LIGHT_GRAY
},
gradient: {
alignSelf: 'stretch',
alignItems: 'center',
flexDirection: 'column',
height: Dimensions.get('window').height * .35,
},
profilePhotoContainer: {
zIndex: 50,
position: 'absolute',
backgroundColor:'blue',
top: Dimensions.get('window').height * .12,
elevation: 4,
},
profileImage: {
zIndex: 5,
width: 100,
height: 100,
borderRadius: 50,
borderWidth: 4,
borderColor: '#FFF',
backgroundColor: 'transparent',
},
profileBox: {
zIndex: 1,
position: 'absolute',
left: Dimensions.get('window').width * .07,
top: Dimensions.get('window').height * .18,
borderRadius: 8,
shadowRadius: 8,
elevation: 3,
shadowOpacity: 0.3,
backgroundColor: 'yellow',
width: Dimensions.get('window').width * .86,
height: Dimensions.get('window').height * .50,
}
在链接中,您可以看到到目前为止我做了什么以及问题是什么:
https://imgur.com/a/kC4ZTUn
我想实现这种情况:
https://imgur.com/a/KMSRVfZ
谢谢
最佳答案
您应该从LinearGradient视图中取出具有profilePhotoContainer样式的View,然后它将可以完美地工作!