我正在尝试将图像放置在已经在其他视图上但没有成功的视图上。
我一直在尝试使用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,
}
在链接中,您可以看到我到目前为止所做的事情以及问题所在:
我想实现这种情况:
谢谢
答案 0 :(得分:1)
您应该从LinearGradient视图中取出具有profilePhotoContainer样式的View,然后它将可以正常使用!
答案 1 :(得分:0)
这里是实现与设计相似的示例代码,
<View style={{flex: 1}}>
<View style={{flex:0.33,backgroundColor:"aqua",justifyContent:"center",alignItems:"center"}}>
<View style={{position:"absolute",backgroundColor:"grey",height:200,width:100,borderRadius:5,left:0.23*width,top:0.25*height}}/> {/*Represents the box where you add user name, profession etc */}
<View style={{backgroundColor:"yellow",height:50,width:50,borderRadius:25}}/> {/*Image tag goes here */}
</View>
</View>
我认为没有必要为position:"absolute"
添加profilePhotoContainer
道具,而定位可以通过flex原理来控制。您可能只需要position:"absolute"
属性的一个视图即可。
如果您需要进一步的帮助,请发表评论。
答案 2 :(得分:0)
从此获取帮助-
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity
} from 'react-native';
export default class Profile extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.header}></View>
<Image style={styles.avatar} source={{uri: 'https://bootdey.com/img/Content/avatar/avatar6.png'}}/>
<View style={styles.body}>
<View style={styles.bodyContent}>
<Text style={styles.name}>John Doe</Text>
<Text style={styles.info}>UX Designer / Mobile developer</Text>
<Text style={styles.description}>Lorem ipsum dolor sit amet, saepe sapientem eu nam. Qui ne assum electram expetendis, omittam deseruisse consequuntur ius an,</Text>
<TouchableOpacity style={styles.buttonContainer}>
<Text>Opcion 1</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonContainer}>
<Text>Opcion 2</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
header:{
backgroundColor: "#00BFFF",
height:200,
},
avatar: {
width: 130,
height: 130,
borderRadius: 63,
borderWidth: 4,
borderColor: "white",
marginBottom:10,
alignSelf:'center',
position: 'absolute',
marginTop:130
},
name:{
fontSize:22,
color:"#FFFFFF",
fontWeight:'600',
},
body:{
marginTop:40,
},
bodyContent: {
flex: 1,
alignItems: 'center',
padding:30,
},
name:{
fontSize:28,
color: "#696969",
fontWeight: "600"
},
info:{
fontSize:16,
color: "#00BFFF",
marginTop:10
},
description:{
fontSize:16,
color: "#696969",
marginTop:10,
textAlign: 'center'
},
buttonContainer: {
marginTop:10,
height:45,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginBottom:20,
width:250,
borderRadius:30,
backgroundColor: "#00BFFF",
},
});