Documentation edits; transfer props

This commit is contained in:
Nicolas Gallagher
2015-09-07 13:14:09 -07:00
parent 0f42cd83e1
commit 38e4de76cd
4 changed files with 28 additions and 17 deletions

View File

@@ -73,7 +73,7 @@ Displays text as an inline block and supports basic press handling.
### [`TextInput`](docs/components/TextInput.md)
Accessible single- and multi-line text input via a keyboard. Supports features
Accessible single- and multi-line text input via a keyboard.
### [`Touchable`](docs/components/Touchable.md)
@@ -81,26 +81,23 @@ Touch bindings for press and long press.
### [`View`](docs/components/View.md)
The fundamental UI building block: layout with flexbox, layout and positioning
styles, and accessibility controls.
The fundamental UI building block using flexbox for layout.
## Styling
React Native for Web provides a mechanism to declare all your styles and layout
inline with the components that use them. The `View` component makes it easy to
build common layouts with flexbox, such as stacked and nested boxes with margin
and padding.
React Native for Web provides a mechanism to declare all your styles in
JavaScript within your components. The `View` component makes it easy to build
common layouts with flexbox, such as stacked and nested boxes with margin
and padding. See this [guide to flexbox][flexbox-guide-url].
Styling is identical to using inline styles in React, but most inline styles
are converted to single-purpose classes. The current implementation includes
300+ precomputed CSS declarations (~4.5KB gzipped) that cover a large
proportion of common styles. A more sophisticated build-time implementation may
produce a slightly larger CSS file for large apps, and fall back to fewer
inline styles. Read more about the [styling
Authoring `style` is no different to the existing use of inline styles in
React, but most inline styles are converted to single-purpose class names. The
current implementation includes 300+ precomputed CSS declarations (~4.5KB
gzipped) that covers many common property-value pairs. A more sophisticated
build-time implementation may produce a slightly larger CSS file for large
apps, and fall back to fewer inline styles. Read more about the [styling
strategy](docs/style.md).
See this [guide to flexbox][flexbox-guide-url].
```js
import React, { Image, Text, View } from 'react-native-web'

View File

@@ -12,6 +12,8 @@ container.
## Props
NOTE: `Text` will transfer all other props to the rendered HTML element.
**children** any
Child content

View File

@@ -1,11 +1,13 @@
# View
`View` is the fundamental UI building block. It is a component that supports
style, layout with flexbox, and accessibility controls. It can be nested
style, layout with flexbox, and accessibility controls. It can be nested
inside another `View` and has 0-to-many children of any type.
## Props
NOTE: `View` will transfer all other props to the rendered HTML element.
**accessibilityLabel** string
Overrides the text that's read by the screen reader when the user interacts

View File

@@ -44,11 +44,21 @@ class Text extends React.Component {
}
render() {
const { children, component, numberOfLines, style, testID } = this.props
const {
children,
component,
numberOfLines,
onPress,
style,
testID,
...other
} = this.props
const resolvedStyle = pickProps(style, textStyleKeys)
return (
<CoreComponent
{...other}
children={children}
className={'Text'}
component={component}