From c0991af077693d2d53918c8e2c3ce87bda1bc974 Mon Sep 17 00:00:00 2001 From: Travis CI Date: Thu, 2 Apr 2015 01:50:37 +0000 Subject: [PATCH] update website --- docs/image.html | 8 +- docs/pushnotificationios.html | 174 +++++++++++++++++++++++++++++++--- 2 files changed, 168 insertions(+), 14 deletions(-) diff --git a/docs/image.html b/docs/image.html index ccf549f15de..d3334951c89 100644 --- a/docs/image.html +++ b/docs/image.html @@ -13,11 +13,13 @@ images from local disk, such as the camera roll.

Example usage:

/> </View> ); -},

Edit on GitHubProps #

accessibilityLabel string #

accessibilityLabel - Custom string to display for accessibility.

accessible bool #

accessible - Whether this element should be revealed as an accessible -element.

capInsets {top: number, left: number, bottom: number, right: number} #

capInsets - When the image is resized, the corners of the size specified +},

Edit on GitHubProps #

accessibilityLabel string #

Custom string to display for accessibility.

accessible bool #

Whether this element should be revealed as an accessible element.

capInsets {top: number, left: number, bottom: number, right: number} #

When the image is resized, the corners of the size specified by capInsets will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable -rounded buttons, shadows, and other resizable assets. More info:

https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets:

source {uri: string} #

style style #

Flexbox...
backgroundColor string
borderColor string
borderRadius number
borderWidth number
opacity number
resizeMode Object.keys(ImageResizeMode)
tintColor string

testID string #

testID - A unique identifier for this element to be used in UI Automation +rounded buttons, shadows, and other resizable assets. More info on +Apple documentation

source {uri: string} #

uri is a string representing the resource identifier for the image, which +could be an http address, a local file path, or the name of a static image +resource (which should be wrapped in the required('image!name') function).

style style #

Flexbox...
backgroundColor string
borderColor string
borderRadius number
borderWidth number
opacity number
resizeMode Object.keys(ImageResizeMode)
tintColor string

testID string #

A unique identifier for this element to be used in UI Automation testing scripts.

Edit on GitHubDescription #

Displaying images is a fascinating subject, React Native uses some cool tricks to make it a better experience.

No Automatic Sizing #

If you don't give a size to an image, the browser is going to render a 0x0 element, download the image, and then render the image based with the correct size. The big issue with this behavior is that your UI is going to jump all around as images load, this makes for a very bad user experience.

In React Native, this behavior is intentionally not implemented. It is more work for the developer to know the dimensions (or just aspect ratio) of the image in advance, but we believe that it leads to a better user experience.

Background Image via Nesting #

A common feature request from developers familiar with the web is background-image. To handle this use case, simply create a normal <Image> component and add whatever children to it you would like to layer on top of it.

return ( <Image source={...}> <Text>Inside</Text> diff --git a/docs/pushnotificationios.html b/docs/pushnotificationios.html index 60258e5e378..072d9fc1117 100644 --- a/docs/pushnotificationios.html +++ b/docs/pushnotificationios.html @@ -1,11 +1,163 @@ -Error: ReferenceError: notification is not defined - at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:27:12 - at onOutputGenerated (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:96:9) - at Object.renderReactPage.done (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:352:7) - at renderReactPage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/renderReactPage.js:130:17) - at renderComponentPackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:338:3) - at routePackageHandler (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/DefaultRouter.js:281:5) - at onComputePackage (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/index.js:100:9) - at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/guard.js:29:10 - at onWarmed (/Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/src/Packager.js:270:9) - at /Users/travis/build/facebook/react-native/website/node_modules/react-page-middleware/node_modules/async/lib/async.js:116:25 \ No newline at end of file +React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

PushNotificationIOS

Handle push notifications for your app, including permission handling and +icon badge number.

To get up and running, configure your notifications with Apple +and your server-side system. To get an idea, this is the Parse guide.

Methods #

static setApplicationIconBadgeNumber(number: number) #

Sets the badge number for the app icon on the home screen

static getApplicationIconBadgeNumber(callback: Function) #

Gets the current badge number for the app icon on the home screen

static addEventListener(type: string, handler: Function) #

Attaches a listener to remote notifications while the app is running in the +foreground or the background.

The handler will get be invoked with an instance of PushNotificationIOS

static requestPermissions() #

Requests all notification permissions from iOS, prompting the user's +dialog box.

static checkPermissions(callback: Function) #

See what push permissions are currently enabled. callback will be +invoked with a permissions object:

  • alert :boolean
  • badge :boolean
  • sound :boolean

static removeEventListener(type: string, handler: Function) #

Removes the event listener. Do this in componentWillUnmount to prevent +memory leaks

static popInitialNotification() #

An initial notification will be available if the app was cold-launched +from a notification.

The first caller of popInitialNotification will get the initial +notification object, or null. Subsequent invocations will return null.

constructor(nativeNotif) #

You will never need to instansiate PushNotificationIOS yourself. +Listening to the notification event and invoking +popInitialNotification is sufficient

getMessage() #

An alias for getAlert to get the notification's main message string

getSound() #

Gets the sound string from the aps object

getAlert() #

Gets the notification's main message from the aps object

getBadgeCount() #

Gets the badge count number from the aps object

getData() #

Gets the data object on the notif

Edit on GitHubExamples #

'use strict'; + +var React = require('react-native'); +var { + AlertIOS, + PushNotificationIOS, + StyleSheet, + Text, + TouchableHighlight, + View, +} = React; + +var Button = React.createClass({ + render: function() { + return ( + <TouchableHighlight + underlayColor={'white'} + style={styles.button} + onPress={this.props.onPress}> + <Text style={styles.buttonLabel}> + {this.props.label} + </Text> + </TouchableHighlight> + ); + } +}); + +class NotificationExample extends React.Component { + componentWillMount() { + PushNotificationIOS.addEventListener('notification', this._onNotification); + } + + componentWillUnmount() { + PushNotificationIOS.removeEventListener('notification', this._onNotification); + } + + render() { + return ( + <View> + <Button + onPress={this._sendNotification} + label="Send fake notification" + /> + </View> + ); + } + + _sendNotification() { + require('RCTDeviceEventEmitter').emit('remoteNotificationReceived', { + aps: { + alert: 'Sample notification', + badge: '+1', + sound: 'default', + category: 'REACT_NATIVE' + }, + }); + } + + _onNotification(notification) { + AlertIOS.alert( + 'Notification Received', + 'Alert message: ' + notification.getMessage(), + [{ + text: 'Dismiss', + onPress: null, + }] + ); + } +} + +class NotificationPermissionExample extends React.Component { + constructor(props) { + super(props); + this.state = {permissions: null}; + } + + render() { + return ( + <View> + <Button + onPress={this._showPermissions.bind(this)} + label="Show enabled permissions" + /> + <Text> + {JSON.stringify(this.state.permissions)} + </Text> + </View> + ); + } + + _showPermissions() { + PushNotificationIOS.checkPermissions((permissions) => { + this.setState({permissions}); + }); + } +} + +var styles = StyleSheet.create({ + button: { + padding: 10, + alignItems: 'center', + justifyContent: 'center', + }, + buttonLabel: { + color: 'blue', + }, +}); + +exports.title = 'PushNotificationIOS'; +exports.description = 'Apple PushNotification and badge value'; +exports.examples = [ +{ + title: 'Badge Number', + render(): React.Component { + PushNotificationIOS.requestPermissions(); + + return ( + <View> + <Button + onPress={() => PushNotificationIOS.setApplicationIconBadgeNumber(42)} + label="Set app's icon badge to 42" + /> + <Button + onPress={() => PushNotificationIOS.setApplicationIconBadgeNumber(0)} + label="Clear app's icon badge" + /> + </View> + ); + }, +}, +{ + title: 'Push Notifications', + render(): React.Component { + return <NotificationExample />; + } +}, +{ + title: 'Notifications Permissions', + render(): React.Component { + return <NotificationPermissionExample />; + } +}];
Next →
© 2015 Facebook Inc.
\ No newline at end of file