如何让所有 child 视图重叠并填充它们的 parent w/ React Native Flexbox

Question

我想让所有 children 填充可用的 space，并相互重叠，因此只有最后一个 child 可见。

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

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

Answer 1

我想你想要这样的东西：

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

component/style.js:

import { StyleSheet } from 'react-native';

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

因此，具有 root 样式的 View 将填充其 parent 的所有 space，因为它具有 flex: 1。并且它有position: relative，所以具有绝对定位的children会相应地起作用。

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

如何让所有 child 视图重叠并填充它们的 parent w/ React Native Flexbox

How to get all child views to overlap and fill their parent w/ React Native Flexbox

react-native

react-native-flexbox