react-native - 如何使用 React Native 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>
        );
    }
}

组件/样式.js：

import { StyleSheet } from 'react-native';

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

因此，Viewwithroot样式将填充其父级的所有空间，因为它具有flex: 1. 而且它有position: relative，所以绝对定位的孩子会相应地行动。

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