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,
    },
});

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

带有View和child1的

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

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

1 个答案: