如何使所有儿童视图重叠并填充其父母，并带有本地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,
    },
});

因此，带有root样式的View将填充其父母的所有空间，因为它具有flex: 1。它具有position: relative，因此具有绝对定位的孩子将采取相应的行动。

带有child1和child2的View s都具有绝对定位（StyleSheet.absoluteFillObject是{position: 'absolute', top: 0, right: 0, bottom: 0, left: 0}文档的快捷方式）。child1和child2将重叠，child2将在child1的顶部，因为它稍后呈现。