kylefang/react-native-web
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-03-27 22:55:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update documentation and examples

Browse Source
This commit is contained in:
Nicolas Gallagher
2015-12-19 10:51:48 -08:00
parent 92554321df
commit 3d1ad50a58
10 changed files with 61 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@@ -128,7 +128,8 @@ reactStyleSheet.textContent = StyleSheet.renderToString()
### [`StyleSheet`](docs/apis/StyleSheet.md)
StyleSheet is a style abstraction that transforms inline styles to CSS on the
client or the server. It provides a minimal CSS reset.
client or the server. It provides a minimal CSS reset targeting elements and
pseudo-elements beyond the reach of React inline styles.
## Components
@@ -147,7 +148,7 @@ A scrollable view with event throttling.
### [`Text`](docs/components/Text.md)
Displays text as an inline block and supports basic press handling.
Displays text inline and supports basic press handling.
### [`TextInput`](docs/components/TextInput.md)

30
docs/components/Image.md
View File

@@ -57,7 +57,7 @@ could be an http address or a base64 encoded image.
**style**: style
[View](View.md) style
+ ...[View#style](View.md)
Defaults:
@@ -76,11 +76,9 @@ Used to locate a view in end-to-end tests.
```js
import placeholderAvatar from './placeholderAvatar.png'
import React, { Image, StyleSheet } from 'react-native-web'
import React, { Component, Image, PropTypes, StyleSheet } from 'react-native-web'
const { Component, PropTypes } = React;
export default class Avatar extends Component {
export default class ImageExample extends Component {
constructor(props, context) {
super(props, context)
this.state = { loading: true }
@@ -112,7 +110,11 @@ export default class Avatar extends Component {
onLoad={this._onLoad.bind(this)}
resizeMode='cover'
source={{ uri: user.avatarUrl }}
style={{ ...styles.base, ...styles[size], ...loadingStyle }}
style={{
...styles.base,
...styles[size],
...loadingStyle
}}
/>
)
}
@@ -121,23 +123,23 @@ export default class Avatar extends Component {
const styles = StyleSheet.create({
base: {
borderColor: 'white',
borderRadius: '5px',
borderWidth: '5px'
borderRadius: 5,
borderWidth: 5
},
loading: {
opacity: 0.5
},
small: {
height: '32px',
width: '32px'
height: 32,
width: 32
},
normal: {
height: '48px',
width: '48px'
height: 48,
width: 48
},
large: {
height: '64px',
width: '64px'
height: 64,
width: 64
}
})
```

21
docs/components/ListView.md
View File

@@ -10,28 +10,17 @@ Content to display over the image.
**style**: style
+ `property` type
Defaults:
```js
{
}
```
+ ...[View#style](View.md)
## Examples
```js
import React, { ListView } from 'react-native-web'
import React, { Component, ListView, PropTypes } from 'react-native-web'
const { Component, PropTypes } = React;
export default class ListViewExample extends Component {
static propTypes = {}
class Example extends Component {
static propTypes = {
}
static defaultProps = {
}
static defaultProps = {}
render() {
return (

11
docs/components/ScrollView.md
View File

@@ -38,16 +38,15 @@ time the view is scrolled.
**style**: style
[View](View.md) style
+ ...[View#style](View.md)
## Examples
```js
import React, { ScrollView, StyleSheet } from 'react-native-web'
import React, { Component, ScrollView, StyleSheet } from 'react-native-web'
import Item from './Item'
export default class App extends React.Component {
export default class ScrollViewExample extends Component {
constructor(props, context) {
super(props, context)
this.state = {
@@ -75,10 +74,10 @@ export default class App extends React.Component {
const styles = StyleSheet.create({
root: {
borderWidth: '1px'
borderWidth: 1
},
container: {
padding: '10px'
padding: 10
}
})
```

20
docs/components/Text.md
View File

@@ -1,13 +1,11 @@
# Text
`Text` is component for displaying text. It supports style, basic touch
handling, and inherits typographic styles from ancestor elements. In a
divergence from React Native, components other than `Text` can be children of a
`Text` component.
handling, and inherits typographic styles from ancestor elements.
The `Text` is unique relative to layout: child elements use text layout
(`inline-block`) rather than flexbox layout. This means that elements inside of
a `Text` are not rectangles, as they wrap when reaching the edge of their
(`inline`) rather than flexbox layout. This means that elements inside of a
`Text` are not rectangles, as they wrap when reaching the edge of their
container.
Unsupported React Native props:
@@ -53,7 +51,7 @@ This function is called on press.
**style**: style
+ `backgroundColor`
+ ...[View#style](View.md)
+ `color`
+ `fontFamily`
+ `fontSize`
@@ -61,8 +59,6 @@ This function is called on press.
+ `fontWeight`
+ `letterSpacing`
+ `lineHeight`
+ `margin`
+ `padding`
+ `textAlign`
+ `textDecoration`
+ `textTransform`
@@ -77,18 +73,18 @@ Used to locate this view in end-to-end tests.
## Examples
```js
import React, { StyleSheet, Text } from 'react-native-web'
import React, { Component, PropTypes, StyleSheet, Text } from 'react-native-web'
const { Component, PropTypes } = React
class PrettyText extends Component {
export default class PrettyText extends Component {
static propTypes = {
...Text.propTypes,
color: PropTypes.oneOf(['white', 'gray', 'red']),
size: PropTypes.oneOf(['small', 'normal', 'large']),
weight: PropTypes.oneOf(['light', 'normal', 'bold'])
}
static defaultProps = {
...Text.defaultProps,
color: 'gray',
size: 'normal',
weight: 'normal'

9
docs/components/TextInput.md
View File

@@ -130,8 +130,7 @@ If `true`, all text will automatically be selected on focus.
**style**: style
[View](View.md) style
+ ...[View#style](View.md)
+ `color`
+ `direction`
+ `fontFamily`
@@ -159,9 +158,9 @@ user edits to the value set `editable={false}`.
## Examples
```js
import React, { StyleSheet, TextInput } from 'react-native-web'
import React, { Component, StyleSheet, TextInput } from 'react-native-web'
export default class AppTextInput extends React.Component {
export default class TextInputExample extends Component {
constructor(props, context) {
super(props, context)
this.state = { isFocused: false }
@@ -192,7 +191,7 @@ export default class AppTextInput extends React.Component {
const styles = StyleSheet.create({
default: {
borderColor: 'gray',
borderWidth: '0 0 2px 0'
borderBottomWidth: 2
},
focused: {
borderColor: 'blue'

14
docs/components/Touchable.md
View File

@@ -79,21 +79,17 @@ Delay in ms, from the release of the touch, before `onPressOut` is called.
**style**: style
[View](View.md) style
+ ...[View#style](View.md)
## Examples
```js
import React, { Touchable } from 'react-native-web'
import React, { Component, PropTypes, Touchable } from 'react-native-web'
const { Component, PropTypes } = React;
export default class Example extends Component {
static propTypes = {}
class Example extends Component {
static propTypes = {
}
static defaultProps = {
}
static defaultProps = {}
render() {
return (

20
docs/components/View.md
View File

@@ -109,6 +109,12 @@ from `style`.
+ `justifyContent`
+ `left`
+ `margin`
+ `marginBottom`
+ `marginHorizontal`
+ `marginLeft`
+ `marginRight`
+ `marginTop`
+ `marginVertical`
+ `maxHeight`
+ `maxWidth`
+ `minHeight`
@@ -119,6 +125,12 @@ from `style`.
+ `overflowX`
+ `overflowY`
+ `padding`
+ `paddingBottom`
+ `paddingHorizontal`
+ `paddingLeft`
+ `paddingRight`
+ `paddingTop`
+ `paddingVertical`
+ `position`
+ `right`
+ `top`
@@ -155,11 +167,9 @@ Used to locate this view in end-to-end tests.
## Examples
```js
import React, { StyleSheet, View } from 'react-native-web'
import React, { Component, PropTypes, StyleSheet, View } from 'react-native-web'
const { Component, PropTypes } = React
class Example extends Component {
export default class ViewExample extends Component {
render() {
return (
<View style={styles.row}>
@@ -181,6 +191,4 @@ const styles = StyleSheet.create({
flexGrow: 1
}
})
export default Example
```

4
examples/components/GridView.js
View File

@@ -1,6 +1,4 @@
import React, { StyleSheet, View } from '../../src'
const { Component, PropTypes } = React
import React, { Component, PropTypes, StyleSheet, View } from '../../src'
const styles = StyleSheet.create({
root: {

1
examples/index.html
View File

@@ -3,7 +3,6 @@
<title>React Native for Web</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="The core React Native components adapted and expanded upon for the web">
<style>html { font-family: sans-serif; }</style>
<style id="react-stylesheet"></style>
<div id="react-root"></div>
<script src="/examples.js"></script>