@uiw/react-native
Version:
UIW for React Native
85 lines (73 loc) • 2.31 kB
Markdown
flex布局
---
Flex 是 React Native CSS flex 布局的一个封装。
### 基础示例
```jsx mdx:preview&background=#bebebe29
import React,{ Fragment } from 'react';
import { Flex, Button, WingBlank } from '@uiw/react-native';
const Demo = () => {
return (
<Fragment>
<Flex>
<Flex.Item>
<WingBlank>
<Button>A</Button>
</WingBlank>
</Flex.Item>
<Flex.Item>
<WingBlank>
<Button>B</Button>
</WingBlank>
</Flex.Item>
<Flex.Item>
<WingBlank>
<Button>C</Button>
</WingBlank>
</Flex.Item>
</Flex>
</Fragment>
);
}
export default Demo
```
### 对齐方式
```jsx mdx:preview&background=#bebebe29
import React,{ Fragment } from 'react';
import {Flex, Button, Spacing, Icon, WingBlank } from '@uiw/react-native';
import {View, Text} from 'react-native';
const Demo = () => {
return (
<Fragment>
<Text>默认左对齐</Text>
<Flex justify="start">
<WingBlank><Button>A</Button></WingBlank>
<WingBlank><Button>B</Button></WingBlank>
<WingBlank><Button>C</Button></WingBlank>
</Flex>
<Spacing />
<Text>居中</Text>
<Flex justify="center">
<WingBlank><Button>D</Button></WingBlank>
<WingBlank><Button>E</Button></WingBlank>
<WingBlank><Button>F</Button></WingBlank>
</Flex>
<Spacing />
<Text>右对齐</Text>
<Flex justify="end">
<WingBlank><Button>H</Button></WingBlank>
<WingBlank><Button>I</Button></WingBlank>
<WingBlank><Button>J</Button></WingBlank>
</Flex>
</Fragment>
);
}
export default Demo
```
### Props
继承 [View](https://facebook.github.io/react-native/docs/view#props) 组件。
| 参数 | 说明 | 类型 | 默认值 |
|------|------|-----|------|
| `direction` | 项目定位方向 | `row` \| `column` \| `row-reverse` \| `column-reverse` | row |
| `justify` | 子元素在主轴上的对齐方式 | `start` \| `end` \| `center` \| `between` \| `around` | start |
| `align` | 子元素在交叉轴上的对齐方式 | `start` \| `end` \| `center` \| `stretch` \| `baseline` | start |
| `wrap` | 子元素的换行方式 | `wrap` \| `nowrap` \| `wrap-reverse` | nowrap |