mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-01-12 22:51:09 +08:00
67 lines
1.8 KiB
Markdown
67 lines
1.8 KiB
Markdown
# View spec
|
|
|
|
`View` is a flexbox container and the fundamental building block for UI. It is
|
|
designed to be nested inside other `View`'s and to have 0-to-many children of
|
|
any type.
|
|
|
|
## PropTypes
|
|
|
|
All other props are transferred directly to the `element`.
|
|
|
|
+ `element`: `func` or `string` (default `"div"`)
|
|
+ `pointerEvents`: `oneOf('all', 'box-only', 'box-none', 'none')`
|
|
+ `style`: `ViewStylePropTypes`
|
|
|
|
## ViewStylePropTypes
|
|
|
|
+ BackgroundPropTypes
|
|
+ BorderThemePropTypes
|
|
+ LayoutPropTypes
|
|
+ `boxShadow`: `string`
|
|
+ `color`: `string`
|
|
+ `opacity`: `number`
|
|
|
|
## ViewStyleDefaultProps
|
|
|
|
Implements the default styles from
|
|
[facebook/css-layout](https://github.com/facebook/css-layout).
|
|
|
|
1. All the flex elements are oriented from top-to-bottom, left-to-right and do
|
|
not shrink. This is how things are laid out using the default CSS settings
|
|
and what you'd expect.
|
|
|
|
2. The most convenient way to express the relation between width and other
|
|
box-model properties.
|
|
|
|
3. Everything is `display:flex` by default. All the behaviors of `block` and
|
|
`inline-block` can be expressed in term of flex but not the opposite.
|
|
|
|
4. Everything is `position:relative`. This makes `position:absolute` target the
|
|
direct parent and not some parent which is either relative or absolute. If
|
|
you want to position an element relative to something else, you should move
|
|
it in the DOM instead of relying of CSS. It also makes `top`, `left`,
|
|
`right`, `bottom` do something when not specifying `position:absolute`.
|
|
|
|
```js
|
|
const ViewStyleDefaultProps = {
|
|
alignItems: 'stretch', // 1
|
|
borderWidth: 0,
|
|
borderStyle: 'solid',
|
|
boxSizing: 'border-box', // 2
|
|
display: 'flex', // 3
|
|
flexBasis: 'auto', // 1
|
|
flexDirection: 'column', // 1
|
|
flexShrink: 0, // 1
|
|
listStyle: 'none',
|
|
margin: 0,
|
|
padding: 0,
|
|
position: 'relative' // 4
|
|
};
|
|
```
|
|
|
|
## Examples
|
|
|
|
```js
|
|
// TODO
|
|
```
|