React native 如何使所有子视图重叠并填充它们的父视图w/React Native Flexbox

我想让所有的子对象填满可用的空间，并相互重叠，这样只有最后一个子对象可见

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

//不可见（如果在下一个子项上设置了bg颜色）

---

我尝试了各种组合的

flex

、

position

、

alignSelf:stretch

，但都没有找到一个成功的组合

我想你想要这样的东西：

component/index.js:

因此，具有

root

样式的

View

将填充其父级的所有空间，因为它具有

flex:1

。并且它有

位置：relative

，因此具有绝对位置的儿童将相应地采取行动

---

View

s与

child1

和

child2

都有绝对定位（

StyleSheet.absoluteFillObject

是

{position:'absolute'，top:0，right:0，bottom:0，left:0}的快捷方式
child1
和
child2
将重叠，并且
child2
将位于
child1
之上，因为它是稍后渲染的。
我想您需要这样的内容：

component/index.js:

因此，具有
root
样式的
View
将填充其父级的所有空间，因为它具有
flex:1
。并且它有
位置：relative
，因此具有绝对位置的儿童将相应地采取行动

View
s与
child1
和
child2
都有绝对定位（
StyleSheet.absoluteFillObject
是
{position:'absolute'，top:0，right:0，bottom:0，left:0}的快捷方式
child1
和
child2
将重叠，并且
child2
将位于
child1
的顶部，因为它是稍后渲染的。
将绝对和z索引放置在堆栈视图的顶部。您可以发布您正在尝试的内容的屏幕截图吗，另一个用于您的期望？将绝对和z索引放置在彼此的顶部以堆叠视图。您可以发布一个您正在尝试的屏幕截图，另一个用于您的期望吗？感谢您的精彩回答和解释，这正是我想要的。我们如何在子组件中获得父视图根？感谢您的精彩回答和解释，这正是我想要的。我们如何在子组件中获得父视图根？
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>
        );
    }
}

import { StyleSheet } from 'react-native';

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