Реагируйте друг на друга в виде стека Flexbox - PullRequest
Новая
       9

Реагируйте друг на друга в виде стека Flexbox

0 голосов
/ 26 октября 2018

Как я могу сложить эти 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 голосов
/ 26 октября 2018

Используйте 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 Примечание: Дайте мне знать, если вы хотитечтобы сделать это по-другому.

...