如何獲得的所有子視圖重疊，並填寫他們的父母W /陣營本地Flexbox的

Question

我想有孩子的所有填充可用空間，並彼此重疊，所以纔有了最後一個孩子是可見的。

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

我試過的flex，position，alignSelf: stretch等各種組合，並不能找到一個成功的組合。

Answer 1

我想你想是這樣的：

組件/ 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> 
     ); 
    } 
} 

組件/ style.js：

import { StyleSheet } from 'react-native'; 

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

所以， View with root styl e將填充其父項的所有空間，因爲它具有flex: 1。它有position: relative，所以具有絕對定位的孩子會採取相應的行動。

View s的child1和child2均具有絕對定位（StyleSheet.absoluteFillObject爲{position: 'absolute', top: 0, right: 0, bottom: 0, left: 0}docs here一個快捷方式）。 child1和child2將重疊並且child2將會對child1頂部，因爲其將在後面呈現。