diff --git a/docs/image.html b/docs/image.html index bf812f589bc..6198450d79b 100644 --- a/docs/image.html +++ b/docs/image.html @@ -50,10 +50,41 @@ using local resources that are outside of Images.xcassets.

< StyleSheet, Text, View, + ActivityIndicatorIOS } = React; var ImageCapInsetsExample = require('./ImageCapInsetsExample'); +var NetworkImageExample = React.createClass({ + watchID: (null: ?number), + + getInitialState: function() { + return { + error: false, + loading: true, + progress: 0 + }; + }, + render: function() { + var loader = this.state.loading ? + <View style={styles.progress}> + <Text>{this.state.progress}%</Text> + <ActivityIndicatorIOS style={{marginLeft:5}}/> + </View> : null; + return this.state.error ? + <Text>{this.state.error}</Text> : + <Image + source={this.props.source} + style={[styles.base, {overflow: 'visible'}]} + onLoadError={(e) => this.setState({error: e.nativeEvent.error})} + onLoadProgress={(e) => this.setState({progress: Math.max(0, Math.round(100 * e.nativeEvent.written / e.nativeEvent.total))}) } + onLoadEnd={() => this.setState({loading: false, error: false})} + onLoadAbort={() => this.setState({error: 'Loading has aborted'})} > + {loader} + </Image>; + } +}); + exports.displayName = (undefined: ?string); exports.framework = 'React'; exports.title = '<Image>'; @@ -88,6 +119,22 @@ exports.examples ); }, }, + { + title: 'Error Handler', + render: function() { + return ( + <NetworkImageExample source={{uri: 'http://TYPO_ERROR_facebook.github.io/react/img/logo_og.png'}} /> + ); + }, + }, + { + title: 'Image Download Progress', + render: function() { + return ( + <NetworkImageExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}}/> + ); + }, + }, { title: 'Border Color', render: function() { @@ -329,6 +376,12 @@ exports.examples : 38, height: 38, }, + progress: { + flex: 1, + alignItems: 'center', + flexDirection: 'row', + width: 100 + }, leftMargin: { marginLeft: 10, }, diff --git a/docs/navigator.html b/docs/navigator.html index 84980eef684..46cb5f536b1 100644 --- a/docs/navigator.html +++ b/docs/navigator.html @@ -38,7 +38,7 @@ is provided. Otherwise, it will default to an array containing only the initialRoute

navigationBar node #

Optionally provide a navigation bar that persists across scene transitions

navigator object #

Optionally provide the navigator object from a parent Navigator

onDidFocus function #

@deprecated Use navigationContext.addListener('didfocus', callback) instead.

Will be called with the new route of each scene after the transition is -complete or after the initial mounting

onItemRef function #

Will be called with (ref, indexInStack, route) when the scene ref changes

onWillFocus function #

@deprecated +complete or after the initial mounting

onWillFocus function #

@deprecated Use navigationContext.addListener('willfocus', callback) instead.

Will emit the target route upon mounting and before each nav transition

renderScene function #

Required function which renders the scene for a given route. Will be invoked with the route and the navigator object

(route, navigator) => <MySceneComponent title={route.title} />

sceneStyle View#style #

Styles to apply to the container of each scene

Next →
React Native

Quick Start

Guides

components

apis

Polyfills

Transforms

Edit on GitHubProps #

transform [{rotate: string}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}] #

transformMatrix [number] #

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

Transforms

Edit on GitHubProps #

transform [{perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}] #

transformMatrix [number] #

Next →
© 2015 Facebook Inc.