我正在尝试将我的图像放在已经在其他视图上的视图上,但是没有成功...

我一直在尝试使用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,然后它将可以完美地工作!

10-05 20:55
查看更多