mirror of
https://github.com/status-im/react-native.git
synced 2025-01-10 09:35:48 +00:00
b1e49832ef
Summary: We had rendering support for prev links, but we never had any previous links in our metadata. Only next links. This adds that support to both Guides and APIs. **For guides**: `previous` is manually inserted into the metadata of the actual markdown file. **For APIs/Components**: `previous` is established via code within `extractDocs.js` > This isn't totally perfect. For example, the transition from the last guide to the first API/component has a next link from the guide, but not a previous link from the API since the way you get the previous links are different from guides and APIs. But this gets us really close. Closes https://github.com/facebook/react-native/pull/8754 Differential Revision: D3557972 Pulled By: hramos fbshipit-source-id: e270bb51e7a4f59f61dad28ae0928d27d0af3d4a
108 lines
4.4 KiB
Markdown
108 lines
4.4 KiB
Markdown
---
|
|
id: flexbox
|
|
title: Layout with Flexbox
|
|
layout: docs
|
|
category: The Basics
|
|
permalink: docs/flexbox.html
|
|
next: handling-text-input
|
|
previous: height-and-width
|
|
---
|
|
|
|
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 defaults are different, with `flexDirection` defaulting to `column` instead of `row`, and `alignItems` defaulting to `stretch` instead of `flex-start`, and the `flex` parameter only supports a single number.
|
|
|
|
#### 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, { Component } from 'react';
|
|
import { AppRegistry, View } from 'react-native';
|
|
|
|
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>
|
|
);
|
|
}
|
|
};
|
|
|
|
AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);
|
|
```
|
|
|
|
#### 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, { Component } from 'react';
|
|
import { AppRegistry, View } from 'react-native';
|
|
|
|
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>
|
|
);
|
|
}
|
|
};
|
|
|
|
AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);
|
|
```
|
|
|
|
#### 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, { Component } from 'react';
|
|
import { AppRegistry, View } from 'react-native';
|
|
|
|
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: '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', () => AlignItemsBasics);
|
|
```
|
|
|
|
#### Going Deeper
|
|
|
|
We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented [here](./docs/layout-props.html).
|
|
|
|
We're getting close to being able to build a real application. One thing we are still missing is a way to take user input, so let's move on to [learn how to handle text input with the TextInput component](/react-native/docs/handling-text-input.html).
|