status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update webview doc 

Summary:
Reference: #8203

Changes made:

Added a webview example to the intro section
Added more details to prop explanations
Test plan (required)

Ran the website locally and checked: http://localhost:8079/react-native/docs/webview.html

![component_webview_2](https://cloud.githubusercontent.com/assets/691109/16316552/f6847c56-393b-11e6-8fdd-a0b61e7f787b.png)
Closes https://github.com/facebook/react-native/pull/8372

Differential Revision: D3477685

Pulled By: JoelMarcey

fbshipit-source-id: a624f5c6c12a8367aea2a6e7c2e520da7a074bbd
This commit is contained in:
Christine Abernathy 2016-06-23 13:04:26 -07:00 committed by Facebook Github Bot 4
parent a111a564f9
commit 8e9e489f21
1 changed files with 82 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
Libraries/Components/WebView/WebView.ios.js
View File

@ -82,7 +82,26 @@ var defaultRenderError = (errorDomain, errorCode, errorDesc) => (
);
/**
* Renders a native WebView.
* `WebView` renders web content in a native view.
*
*```
* import React, { Component } from 'react';
* import { WebView } from 'react-native';
*
* class MyWeb extends Component {
* render() {
* return (
* <WebView
* source={{uri: 'https://github.com/facebook/react-native'}}
* style={{marginTop: 20}}
* />
* );
* }
* }
*```
*
* You can use this component to navigate back and forth in the web view's
* history and configure various properties for the web content.
*/
var WebView = React.createClass({
statics: {
@ -109,7 +128,7 @@ var WebView = React.createClass({
source: PropTypes.oneOfType([
PropTypes.shape({
/*
* The URI to load in the WebView. Can be a local or remote file.
* The URI to load in the `WebView`. Can be a local or remote file.
*/
uri: PropTypes.string,
/*
@ -155,96 +174,125 @@ var WebView = React.createClass({
*/
renderLoading: PropTypes.func,
/**
* Invoked when load finish
* Function that is invoked when the `WebView` has finished loading.
*/
onLoad: PropTypes.func,
/**
* Invoked when load either succeeds or fails
* Function that is invoked when the `WebView` load succeeds or fails.
*/
onLoadEnd: PropTypes.func,
/**
* Invoked on load start
* Function that is invoked when the `WebView` starts loading.
*/
onLoadStart: PropTypes.func,
/**
* Invoked when load fails
* Function that is invoked when the `WebView` load fails.
*/
onError: PropTypes.func,
/**
* Boolean value that determines whether the web view bounces
* when it reaches the edge of the content. The default value is `true`.
* @platform ios
*/
bounces: PropTypes.bool,
/**
* A floating-point number that determines how quickly the scroll view
* decelerates after the user lifts their finger. You may also use string
* shortcuts `"normal"` and `"fast"` which match the underlying iOS settings
* for `UIScrollViewDecelerationRateNormal` and
* `UIScrollViewDecelerationRateFast` respectively.
* decelerates after the user lifts their finger. You may also use the
* string shortcuts `"normal"` and `"fast"` which match the underlying iOS
* settings for `UIScrollViewDecelerationRateNormal` and
* `UIScrollViewDecelerationRateFast` respectively:
*
* - normal: 0.998
* - fast: 0.99 (the default for iOS WebView)
* - fast: 0.99 (the default for iOS web view)
* @platform ios
*/
decelerationRate: ScrollView.propTypes.decelerationRate,
/**
* Boolean value that determines whether scrolling is enabled in the
* `WebView`. The default value is `true`.
* @platform ios
*/
scrollEnabled: PropTypes.bool,
/**
* Controls whether to adjust the content inset for web views that are
* placed behind a navigation bar, tab bar, or toolbar. The default value
* is `true`.
*/
automaticallyAdjustContentInsets: PropTypes.bool,
/**
* The amount by which the web view content is inset from the edges of
* the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}.
*/
contentInset: EdgeInsetsPropType,
/**
* Function that is invoked when the `WebView` loading starts or ends.
*/
onNavigationStateChange: PropTypes.func,
startInLoadingState: PropTypes.bool, // force WebView to show loadingView on first load
/**
* Boolean value that forces the `WebView` to show the loading view
* on the first load.
*/
startInLoadingState: PropTypes.bool,
/**
* The style to apply to the `WebView`.
*/
style: View.propTypes.style,
/**
* Used on Android only, JS is enabled by default for WebView on iOS
* Boolean value to enable JavaScript in the `WebView`. Used on Android only
* as JavaScript is enabled by default on iOS. The default value is `true`.
* @platform android
*/
javaScriptEnabled: PropTypes.bool,
/**
* Used on Android only, controls whether DOM Storage is enabled or not
* Boolean value to control whether DOM Storage is enabled. Used only in
* Android.
* @platform android
*/
domStorageEnabled: PropTypes.bool,
/**
* Sets the JS to be injected when the webpage loads.
* Set this to provide JavaScript that will be injected into the web page
* when the view loads.
*/
injectedJavaScript: PropTypes.string,
/**
* Sets the user-agent for this WebView. The user-agent can also be set in native using
* WebViewConfig. This prop will overwrite that config.
* Sets the user-agent for the `WebView`.
* @platform android
*/
userAgent: PropTypes.string,
/**
* Sets whether the webpage scales to fit the view and the user can change the scale.
* Boolean that controls whether the web content is scaled to fit
* the view and enables the user to change the scale. The default value
* is `true`.
*/
scalesPageToFit: PropTypes.bool,
/**
* Allows custom handling of any webview requests by a JS handler. Return true
* or false from this method to continue loading the request.
* Function that allows custom handling of any web view requests. Return
* `true` from the function to continue loading the request and `false`
* to stop loading.
* @platform ios
*/
onShouldStartLoadWithRequest: PropTypes.func,
/**
* Determines whether HTML5 videos play inline or use the native full-screen
* controller.
* default value `false`
* **NOTE** : "In order for video to play inline, not only does this
* property need to be set to true, but the video element in the HTML
* document must also include the webkit-playsinline attribute."
* Boolean that determines whether HTML5 videos play inline or use the
* native full-screen controller. The default value is `false`.
*
* **NOTE** : In order for video to play inline, not only does this
* property need to be set to `true`, but the video element in the HTML
* document must also include the `webkit-playsinline` attribute.
* @platform ios
*/
allowsInlineMediaPlayback: PropTypes.bool,
/**
* Determines whether HTML5 audio & videos require the user to tap before they can
* start playing. The default value is `false`.
* Boolean that determines whether HTML5 audio and video requires the user
* to tap them before they start playing. The default value is `false`.
*/
mediaPlaybackRequiresUserAction: PropTypes.bool,
},
@ -337,7 +385,7 @@ var WebView = React.createClass({
},
/**
* Go forward one page in the webview's history.
* Go forward one page in the web view's history.
*/
goForward: function() {
UIManager.dispatchViewManagerCommand(
@ -348,7 +396,7 @@ var WebView = React.createClass({
},
/**
* Go back one page in the webview's history.
* Go back one page in the web view's history.
*/
goBack: function() {
UIManager.dispatchViewManagerCommand(
@ -370,6 +418,9 @@ var WebView = React.createClass({
);
},
/**
* Stop loading the current page.
*/
stopLoading: function() {
UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(),
@ -389,7 +440,7 @@ var WebView = React.createClass({
},
/**
* Returns the native webview node.
* Returns the native `WebView` node.
*/
getWebViewHandle: function(): any {
return ReactNative.findNodeHandle(this.refs[RCT_WEBVIEW_REF]);