Как я могу поставить эти 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);
Используйте свойство 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>
Примечание: Дайте мне знать, если вы хотите сделать это по-другому.
Прямо сейчас есть одна вершина за другой. Измените ширину, высоту, верхнее, нижнее, левое и правое значения или представления, чтобы наблюдать за ними.
Есть ли способ поставить все 3 коробки друг на друга?