React native flexbox наложение друг на друга

Как я могу поставить эти 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);
1
0
340
1

Ответы 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>

enter image description hereПримечание: Дайте мне знать, если вы хотите сделать это по-другому.

Есть ли способ поставить все 3 коробки друг на друга?

Yahoo 26.10.2018 16:48

Прямо сейчас есть одна вершина за другой. Измените ширину, высоту, верхнее, нижнее, левое и правое значения или представления, чтобы наблюдать за ними.

Sateesh Yemireddi 26.10.2018 16:55
googleweblight.com/i?u=https://unbug.gitbooks.io/…
Sateesh Yemireddi 26.10.2018 17:02

Другие вопросы по теме