Поместить изображение поверх вида в реагировать родной

Question

Я пытаюсь разместить свое изображение поверх другого, но уже безуспешно ...

Я пытался использовать 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

Спасибо

Answer 1

Вы должны убрать представление со стилем profilePhotoContainer из представления LinearGradient, и тогда оно будет отлично работать!

Answer 2

Получите помощь от этого -

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",
  },
});

Answer 3

Вот пример кода для достижения схожего с дизайном,

<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, позиционирование может контролироваться с помощью гибких принципов,Вам может потребоваться только один просмотр с position:"absolute" prop.

Оставьте комментарий, если вам требуется дополнительная помощь.