In React Native, come posso posizionare una vista sopra un'altra vista, con una parte che giace fuori dai limiti della vista?

Question

Sto cercando di creare un layout come in seguito con React Native.

Come faccio a specificare la posizione di B rispetto ad A?

Con iOS Interface Builder e blocchi automatici, questo può essere fatto in modo molto esplicito ed è un gioco da ragazzi. Non è così ovvio come si possa raggiungere questo risultato con React Native.

Answer 1

aggiungere quanto segue alla "galleggiante" vista

position: 'absolute' 

Potrebbe anche essere necessario aggiungere un valore superiore e sinistra per il posizionamento

vedere questo esempio: https://rnplay.org/apps/OjzcxQ/edit

Answer 2

È possibile utilizzare zIndex per posizionare una vista su un'altra. Funziona come la proprietà z-index CSS: i componenti con un numero maggiore zIndex eseguiranno il rendering in cima.

È possibile fare riferimento: Layout Props

Snippet:

<ScrollView> 
      <StatusBar backgroundColor="black" barStyle="light-content" /> 
      <Image style={styles.headerImage} source={{ uri: "http://www.artwallpaperhi.com/thumbnails/detail/20140814/cityscapes%20buildings%20hong%20kong_www.artwallpaperhi.com_18.jpg" }}> 
      <View style={styles.back}> 
       <TouchableOpacity> 
       <Icons name="arrow-back" size={25} color="#ffffff" /> 
       </TouchableOpacity> 
      </View> 
      <Image style={styles.subHeaderImage} borderRadius={55} source={{ uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Albert_Einstein_1947.jpg/220px-Albert_Einstein_1947.jpg" }} /> 
      </Image> 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     backgroundColor: "white" 
    }, 
    headerImage: { 
     height: height(150), 
     width: deviceWidth 
    }, 
    subHeaderImage: { 
     height: 110, 
     width: 110, 
     marginTop: height(35), 
     marginLeft: width(25), 
     borderColor: "white", 
     borderWidth: 2, 
     zIndex: 5 
    },