mirror of
https://github.com/status-im/react-native.git
synced 2025-02-09 16:14:47 +00:00
6c5f532591
Summary: These pages should sufficiently give a beginner enough information to make most layouts in React Native. They should go after the basics-style page, whenever that is ready. Having a single page for Layout was too much, so I split it into two: Dimensions and Layout.   lacker Closes https://github.com/facebook/react-native/pull/8364 Differential Revision: D3477147 Pulled By: lacker fbshipit-source-id: 1ef31ac0a64e43166a7581b38fa8263282672eeb
105 lines
4.0 KiB
Markdown
105 lines
4.0 KiB
Markdown
---
|
|
id: basics-layout
|
|
title: Layout
|
|
layout: docs
|
|
category: The Basics
|
|
permalink: docs/basics-layout.html
|
|
next: basics-network
|
|
---
|
|
|
|
A component can specify the layout of its children using the flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.
|
|
|
|
You will normally use a combination of `flexDirection`, `alignItems`, and `justifyContent` to achieve the right layout.
|
|
|
|
> Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The most notable one: the defaults are different, with `flexDirection` defaulting to `column` instead of `row`, and `alignItems` defaulting to `stretch` instead of `flex-start`.
|
|
|
|
#### Flex Direction
|
|
|
|
Adding `flexDirection` to a component's `style` determines the **primary axis** of its layout. Should the children be organized horizontally (`row`) or vertically (`column`)? The default is `column`.
|
|
|
|
```ReactNativeWebPlayer
|
|
import React from 'react';
|
|
import { AppRegistry, View } from 'react-native';
|
|
|
|
class AwesomeProject {
|
|
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>
|
|
);
|
|
}
|
|
};
|
|
|
|
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
|
|
```
|
|
|
|
#### Justify Content
|
|
|
|
Adding `justifyContent` to a component's style determines the **distribution** of children along the **primary axis**. Should children be distributed at the start, the center, the end, or spaced evenly? Available options are `flex-start`, `center`, `flex-end`, `space-around`, and `space-between`.
|
|
|
|
```ReactNativeWebPlayer
|
|
import React from 'react';
|
|
import { AppRegistry, View } from 'react-native';
|
|
|
|
class AwesomeProject {
|
|
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>
|
|
);
|
|
}
|
|
};
|
|
|
|
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
|
|
```
|
|
|
|
#### Align Items
|
|
|
|
Adding `alignItems` to a component's style determines the **alignment** of children along the **secondary axis** (if the primary axis is `row`, then the secondary is `column`, and vice versa). Should children be aligned at the start, the center, the end, or stretched to fill? Available options are `flex-start`, `center`, `flex-end`, and `stretch`.
|
|
|
|
> For `stretch` to have an effect, children must not have a fixed dimension along the secondary axis. In the following example, setting `alignItems: stretch` does nothing until the `width: 50` is removed from the children.
|
|
|
|
```ReactNativeWebPlayer
|
|
import React from 'react';
|
|
import { AppRegistry, View } from 'react-native';
|
|
|
|
class AwesomeProject {
|
|
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: '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>
|
|
);
|
|
}
|
|
};
|
|
|
|
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
|
|
```
|
|
|
|
#### API Reference
|
|
|
|
We've covered the basics, but there are many other styles you may need for layouts. The full list is available [here](./docs/flexbox.html).
|