26 lines
871 B
JavaScript
26 lines
871 B
JavaScript
import React from 'react';
|
|
import { View } from 'react-native';
|
|
|
|
class FlexDirectionBasics extends React.Component {
|
|
render() {
|
|
return (
|
|
// Try with height: 300 instead of flex: 1
|
|
<View style={{
|
|
flex: 1,
|
|
// row or column
|
|
flexDirection: 'column',
|
|
// flex-start, center, flex-end, space-around, space-between
|
|
// space-evenly is also described, but throws invalid value error.
|
|
justifyContent: 'space-around',
|
|
// flex-start, center, flex-end, and stretch
|
|
alignItems: 'center',
|
|
}}>
|
|
<View style={{ height: 50, width: 50, backgroundColor: 'powderblue' }} />
|
|
<View style={{ height: 50, width: 50, backgroundColor: 'skyblue' }} />
|
|
<View style={{ height: 50, width: 50, backgroundColor: 'steelblue' }} />
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default FlexDirectionBasics;
|