So erhalten Sie alle untergeordneten Ansichten überlappen und füllen Sie ihre Eltern mit React Native Flexbox

Question

Ich möchte alle Kinder füllen den verfügbaren Platz und einander überlappen, so dass nur das letzte Kind sichtbar ist.

<View style={???}> 
    <View style={???} /> // Not visible (if bg color set on next child) 
    <View style={???} /> 
</View> 

Ich habe verschiedene Kombinationen von flex, position versucht, alignSelf: stretch usw. und kann keine Gewinnkombination finden.

Answer 1

Ich glaube, Sie so etwas wie dies wollen:

Komponente/index.js:

import React from 'react'; 
import { 
    View, 
} from 'react-native'; 

import style from './style'; 

export default class Component extends React.Component { 
    render() { 
     return (
      <View style={style.root}> 
       <View style={style.childOne} /> 

       <View style={style.childTwo} /> 
      </View> 
     ); 
    } 
} 

Komponente/style.js:

import { StyleSheet } from 'react-native'; 

export default StyleSheet.create({ 
    root: { 
     flex: 1, 
     position: 'relative', 
    }, 
    child1: { 
     ...StyleSheet.absoluteFillObject, 
    }, 
    child2: { 
     ...StyleSheet.absoluteFillObject, 
    }, 
}); 

So, View mit root styl e füllt das gesamte Leerzeichen seines Elternteils, da es flex: 1 hat. Und es hat position: relative, so werden die Kinder mit absoluter Positionierung entsprechend handeln.

View s mit child1 und child2 sowohl absolute Positionierung (StyleSheet.absoluteFillObject für {position: 'absolute', top: 0, right: 0, bottom: 0, left: 0}docs here eine Abkürzung). child1 und child2 überlappen und child2 wird über child1 sein, da es später gerendert wird.