如何使用 React Native Flexbox 让所有子视图重叠并填充其父视图答案

【问题标题】：How to get all child views to overlap and fill their parent w/ React Native Flexbox如何使用 React Native Flexbox 让所有子视图重叠并填充其父视图
【发布时间】：2017-09-14 01:45:31
【问题描述】：

我想让所有孩子都填满可用空间，并相互重叠，所以只有最后一个孩子可见。

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

我尝试了flex、position、alignSelf: stretch 等的各种组合，但找不到获胜组合。

【问题讨论】：

定位绝对和 z 索引以将视图堆叠在一起
您能否发布您正在尝试的屏幕截图，以及您期望的另一张截图？

标签： react-native react-native-flexbox

【解决方案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 和 root 样式将填充其父级的所有空间，因为它具有 flex: 1。而且它有position: relative，所以绝对定位的孩子会做相应的动作。

Views 与 child1 和 child2 都具有绝对定位（StyleSheet.absoluteFillObject 是 {position: 'absolute', top: 0, right: 0, bottom: 0, left: 0} docs here 的快捷方式）。 child1 和 child2 将重叠，child2 将在 child1 之上，因为它稍后呈现。

【讨论】：

感谢您的精彩回答和解释，这正是我想要的。
如何在子组件中获取父视图根？