From 333caa4472bf2d9022a3e515694faccc4282027a Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Fri, 19 Feb 2016 14:52:43 +0000 Subject: [PATCH] Updated docs for next --- releases/next/docs/webview.html | 80 +++++++++++++++++++++++++++++++-- 1 file changed, 77 insertions(+), 3 deletions(-) diff --git a/releases/next/docs/webview.html b/releases/next/docs/webview.html index 8a6536e3835..27f6fcf1a55 100644 --- a/releases/next/docs/webview.html +++ b/releases/next/docs/webview.html @@ -1,4 +1,4 @@ -WebView – React Native | A framework for building native apps using React
React Nativenext

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

WebView #

Edit on GitHub

Renders a native WebView.

Props #

View props... #

automaticallyAdjustContentInsets bool #

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

html string #

Deprecated

Use the source prop instead.

injectedJavaScript string #

Sets the JS to be injected when the webpage loads.

onError function #

Invoked when load fails

onLoad function #

Invoked when load finish

onLoadEnd function #

Invoked when load either succeeds or fails

onLoadStart function #

Invoked on load start

onNavigationStateChange function #

renderError function #

Function that returns a view to show if there's an error.

renderLoading function #

Function that returns a loading indicator.

source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number #

Loads static html or a uri (with optional headers) in the WebView.

startInLoadingState bool #

style View#style #

url string #

Deprecated

Use the source prop instead.

androiddomStorageEnabled bool #

Used on Android only, controls whether DOM Storage is enabled or not

androidjavaScriptEnabled bool #

Used on Android only, JS is enabled by default for WebView on iOS

iosallowsInlineMediaPlayback bool #

Determines whether HTML5 videos play inline or use the native full-screen +WebView – React Native | A framework for building native apps using React

React Nativenext

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

WebView #

Edit on GitHub

Renders a native WebView.

Props #

View props... #

automaticallyAdjustContentInsets bool #

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

html string #

Deprecated

Use the source prop instead.

injectedJavaScript string #

Sets the JS to be injected when the webpage loads.

onError function #

Invoked when load fails

onLoad function #

Invoked when load finish

onLoadEnd function #

Invoked when load either succeeds or fails

onLoadStart function #

Invoked on load start

onNavigationStateChange function #

renderError function #

Function that returns a view to show if there's an error.

renderLoading function #

Function that returns a loading indicator.

scalesPageToFit bool #

Sets whether the webpage scales to fit the view and the user can change the scale.

source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number #

Loads static html or a uri (with optional headers) in the WebView.

startInLoadingState bool #

style View#style #

url string #

Deprecated

Use the source prop instead.

androiddomStorageEnabled bool #

Used on Android only, controls whether DOM Storage is enabled or not

androidjavaScriptEnabled bool #

Used on Android only, JS is enabled by default for WebView on iOS

iosallowsInlineMediaPlayback bool #

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 @@ -10,13 +10,14 @@ for UIScrollViewDecelerationRateNormal and UIScrollViewDecelerationRateFast respectively. - Normal: 0.998 - Fast: 0.9 (the default for iOS WebView)

iosonShouldStartLoadWithRequest function #

Allows custom handling of any webview requests by a JS handler. Return true -or false from this method to continue loading the request.

iosscalesPageToFit bool #

Sets whether the webpage scales to fit the view and the user can change the scale.

iosscrollEnabled bool #

Examples #

Edit on GitHub
'use strict'; +or false from this method to continue loading the request.

iosscrollEnabled bool #

Examples #

Edit on GitHub
'use strict'; var React = require('react-native'); var { StyleSheet, Text, TextInput, + TouchableWithoutFeedback, TouchableOpacity, View, WebView @@ -157,6 +158,60 @@ or false from this method to continue loading the request.

}); +var Button = React.createClass({ + _handlePress: function() { + if (this.props.enabled && this.props.onPress) { + this.props.onPress(); + } + }, + render: function() { + return ( + <TouchableWithoutFeedback onPress={this._handlePress}> + <View style={[styles.button, this.props.enabled ? {} : styles.buttonDisabled]}> + <Text style={styles.buttonText}>{this.props.text}</Text> + </View> + </TouchableWithoutFeedback> + ); + } +}); + +var ScaledWebView = React.createClass({ + + getInitialState: function() { + return { + scalingEnabled: true + } + }, + + render: function() { + return ( + <View style={{height:120}}> + <WebView + style={{ + backgroundColor: BGWASH, + height: 100, + }} + source={{html: HTML}} + scalesPageToFit={this.state.scalingEnabled} + /> + <View style={styles.buttons}> + { this.state.scalingEnabled ? + <Button + text="Scaling:ON" + enabled={true} + onPress={() => this.setState({scalingEnabled: false})} + /> : + <Button + text="Scaling:OFF" + enabled={true} + onPress={() => this.setState({scalingEnabled: true})} + /> } + </View> + </View> + ); + }, +}) + var styles = StyleSheet.create({ container: { flex: 1, @@ -226,6 +281,21 @@ or false from this method to continue loading the request.

: 20, marginRight: 6, }, + buttons: { + flexDirection: 'row', + height: 30, + backgroundColor: 'black', + alignItems: 'center', + justifyContent: 'space-between', + }, + button: { + flex: 0.5, + width: 0, + margin: 5, + borderColor: 'gray', + borderWidth: 1, + backgroundColor: 'gray', + }, }); const HTML = ` @@ -234,7 +304,7 @@ const HTML = ` <head> <title>Hello Static World</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> - <meta name="viewport" content="width=320, user-scalable=no"> + <meta name="viewport" content="width=640, user-scalable=no"> <style type="text/css"> body { margin: 0; @@ -294,6 +364,10 @@ exports.examples ); } }, + { + title: 'Scale Page to Fit', + render(): ReactElement { return <ScaledWebView/>; } + }, { title: 'POST Test', render(): ReactElement {