React Native Flexbox 相互堆叠视图

Question

如何将这 3 个盒子一个一个叠放？

我尝试设置所有这些但没有帮助 justifyContent: 'center', alignContent: 'center',alignSelf: 'center'

代码：

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      // Try setting `flexDirection` to `column`.
      <View style={{  flex: 1, flexDirection: 'row' ,alignItems: 'center' ,
        justifyContent: 'center', alignContent: 'center',alignSelf: 'center'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);

Answer 1

使用right 属性将View 重叠到另一个上。

<View style={{  flex: 1, flexDirection: 'row' ,alignItems: 'center', justifyContent: 'center', alignContent: 'center', alignSelf: 'center'}}>
  <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
  <View style={{width: 50, height: 50, backgroundColor: 'skyblue', right: 20}} />
  <View style={{width: 50, height: 50, backgroundColor: 'steelblue', right: 30}} />
</View>

注意： 如果您想以不同的方式制作它，请告诉我。