| 1 |
|
| 2 | ### `Layout/ Flex` 组件
|
| 3 |
|
| 4 | > 使用时请注意flex属性顺序 `justifyContent alignItems alignSelf`
|
| 5 |
|
| 6 | 支持属性：
|
| 7 | > flex: `/\d/`
|
| 8 | flexDirection: `/(row(?!-)|row-reverse|column(?!-)|column-reverse)/`
|
| 9 | flexWrap: `/(wrap|nowrap)/`
|
| 10 | justifyContent: `/(flex-start|flex-end|center|space-between|space-around)/`
|
| 11 | alignItems: `/(flex-start|flex-end|center|stretch)/`
|
| 12 | alignSelf: `/(auto|flex-start|flex-end|center|stretch)/`
|
| 13 |
|
| 14 |
|
| 15 | *注意* `style` 中 `Flex` 相关属性会覆盖掉 `flex` 设置属性
|
| 16 |
|
| 17 | | 参数名称 | 描述 | 类型 | 默认值|
|
| 18 | |---|---|---|---|
|
| 19 | | flex | 提供了类似`css`缩写方式快捷设置 `Flex` 属性 | `String` | `1 row` |
|
| 20 | | View.PropTypes | 完全支持`View`属性 | `View.PropTypes` | `--` |
|
| 21 |
|
| 22 | ```jsx
|
| 23 | static propTypes = {
|
| 24 | //内部element元素
|
| 25 | children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]),
|
| 26 | //[必须按顺序传递,值不能为空]flex属性
|
| 27 | flex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
| 28 | }
|
| 29 | ```
|
| 30 |
|
| 31 | ```jsx
|
| 32 | static defaultProps = {
|
| 33 | children: null,
|
| 34 | flex: '1 row',
|
| 35 | }
|
| 36 | ```
|