React Native - Layout with Flexbox
component들은 flexbox 알고리즘을 사용하여 그들의 자손들의 layout을 구체화시킬 수 있다.
Flex Direction
component's style 은layout의 주축을 설정한다. default 는 column 이고 row, column중 하나를 선택 할 수 있다.
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'}}>
<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);
Justify Content
component의 style에 justifyContent를 설정하면 주축에서의 분배를 설정할 수 있다.
flex-start, center, flex-end, space-around, space-between, space-evenly 옵션이 있다.
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class JustifyContentBasics extends Component {
render() {
return (
// Try setting `justifyContent` to `center`.
// Try setting `flexDirection` to `row`.
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
}}>
<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', () => JustifyContentBasics);
Align Items
alignItems는 secondary axis를 결정한다. 만약 primary axis가 row라면, secondary column은 column이 된다.
옵션에는 flex-start, center, flex-end, stretch가 있다.
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class AlignItemsBasics extends Component {
render() {
return (
// Try setting `alignItems` to 'flex-start'
// Try setting `justifyContent` to `flex-end`.
// Try setting `flexDirection` to `row`.
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'stretch',
}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{height: 50, backgroundColor: 'skyblue'}} />
<View style={{height: 100, backgroundColor: 'steelblue'}} />
</View>
);
}
};
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
** stretch 효과를 위해서는 children은 fixed dimension을 지니고 있으면 안된다. width:50 이 있는한, alignItems: stretch는 아무 효과가 없다.
'React Native 공부' 카테고리의 다른 글
React Native 공부 10 - 간단한 구현해보기 (0) | 2019.01.21 |
---|---|
React Native 공부 9 - Handling Text Input and Touch (0) | 2019.01.07 |
React Native 공부 7 - Dimensions (0) | 2019.01.07 |
React Native 공부 6 - State & Style (0) | 2019.01.07 |
React Native 공부 5 - Props (0) | 2019.01.07 |