Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
529666b8f529526591e847075f501dc855222bbd
react-native/docs/webview.html
T
Website Deployment Script 529666b8f5 Updated docs for 0.26
2016-05-18 20:08:33 +00:00

410 lines
76 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>WebView – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="WebView – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.26</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="docs/tutorial.html#content">Tutorial</a></li></ul></div><div class="nav-docs-section"><h3>Community Resources</h3><ul><li><a style="margin-left:0;" class="" href="docs/videos.html#content">Videos</a></li><li><a target="_blank" style="margin-left:0;" class="" href="http://reactnative.cc/">Newsletter</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="docs/images.html#content">Images</a></li><li><a style="margin-left:0;" class="" href="docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="docs/animations.html#content">Animations</a></li><li><a style="margin-left:0;" class="" href="docs/accessibility.html#content">Accessibility</a></li><li><a style="margin-left:0;" class="" href="docs/direct-manipulation.html#content">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="docs/testing.html#content">Testing</a></li><li><a style="margin-left:0;" class="" href="docs/javascript-environment.html#content">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="docs/navigator-comparison.html#content">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="docs/known-issues.html#content">Known Issues</a></li><li><a style="margin-left:0;" class="" href="docs/performance.html#content">Performance</a></li><li><a style="margin-left:0;" class="" href="docs/upgrading.html#content">Upgrading</a></li><li><a style="margin-left:0;" class="" href="docs/platform-specific-code.html#content">Platform Specific Code</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><a style="margin-left:0;" class="" href="docs/native-modules-ios.html#content">Native Modules</a></li><li><a style="margin-left:0;" class="" href="docs/native-components-ios.html#content">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="docs/linking-libraries-ios.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="docs/running-on-device-ios.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="" href="docs/embedded-app-ios.html#content">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/communication-ios.html#content">Communication between native and React Native</a></li></ul></div><div class="nav-docs-section"><h3>Guides (Android)</h3><ul><li><a style="margin-left:0;" class="" href="docs/native-modules-android.html#content">Native Modules</a></li><li><a style="margin-left:0;" class="" href="docs/native-components-android.html#content">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="docs/running-on-device-android.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="" href="docs/embedded-app-android.html#content">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="docs/signed-apk-android.html#content">Generating Signed APK</a></li><li><a style="margin-left:0;" class="" href="docs/android-ui-performance.html#content">Profiling Android UI Performance</a></li><li><a style="margin-left:0;" class="" href="docs/android-building-from-source.html#content">Building React Native from source</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="docs/drawerlayoutandroid.html#content">DrawerLayoutAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="docs/modal.html#content">Modal</a></li><li><a style="margin-left:0;" class="" href="docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="docs/picker.html#content">Picker</a></li><li><a style="margin-left:0;" class="" href="docs/progressbarandroid.html#content">ProgressBarAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/progressviewios.html#content">ProgressViewIOS</a></li><li><a style="margin-left:0;" class="" href="docs/refreshcontrol.html#content">RefreshControl</a></li><li><a style="margin-left:0;" class="" href="docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="docs/segmentedcontrolios.html#content">SegmentedControlIOS</a></li><li><a style="margin-left:0;" class="" href="docs/slider.html#content">Slider</a></li><li><a style="margin-left:0;" class="" href="docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="docs/statusbar.html#content">StatusBar</a></li><li><a style="margin-left:0;" class="" href="docs/switch.html#content">Switch</a></li><li><a style="margin-left:0;" class="" href="docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="docs/tabbarios-item.html#content">TabBarIOS.Item</a></li><li><a style="margin-left:0;" class="" href="docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="docs/toolbarandroid.html#content">ToolbarAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="docs/touchablenativefeedback.html#content">TouchableNativeFeedback</a></li><li><a style="margin-left:0;" class="" href="docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="docs/viewpagerandroid.html#content">ViewPagerAndroid</a></li><li><a style="margin-left:0;" class="active" href="docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="docs/actionsheetios.html#content">ActionSheetIOS</a></li><li><a style="margin-left:0;" class="" href="docs/alert.html#content">Alert</a></li><li><a style="margin-left:0;" class="" href="docs/alertios.html#content">AlertIOS</a></li><li><a style="margin-left:0;" class="" href="docs/animated.html#content">Animated</a></li><li><a style="margin-left:0;" class="" href="docs/appregistry.html#content">AppRegistry</a></li><li><a style="margin-left:0;" class="" href="docs/appstateios.html#content">AppStateIOS</a></li><li><a style="margin-left:0;" class="" href="docs/appstate.html#content">AppState</a></li><li><a style="margin-left:0;" class="" href="docs/asyncstorage.html#content">AsyncStorage</a></li><li><a style="margin-left:0;" class="" href="docs/backandroid.html#content">BackAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/cameraroll.html#content">CameraRoll</a></li><li><a style="margin-left:0;" class="" href="docs/clipboard.html#content">Clipboard</a></li><li><a style="margin-left:0;" class="" href="docs/datepickerandroid.html#content">DatePickerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/dimensions.html#content">Dimensions</a></li><li><a style="margin-left:0;" class="" href="docs/intentandroid.html#content">IntentAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/interactionmanager.html#content">InteractionManager</a></li><li><a style="margin-left:0;" class="" href="docs/layoutanimation.html#content">LayoutAnimation</a></li><li><a style="margin-left:0;" class="" href="docs/linking.html#content">Linking</a></li><li><a style="margin-left:0;" class="" href="docs/linkingios.html#content">LinkingIOS</a></li><li><a style="margin-left:0;" class="" href="docs/nativemethodsmixin.html#content">NativeMethodsMixin</a></li><li><a style="margin-left:0;" class="" href="docs/netinfo.html#content">NetInfo</a></li><li><a style="margin-left:0;" class="" href="docs/panresponder.html#content">PanResponder</a></li><li><a style="margin-left:0;" class="" href="docs/pixelratio.html#content">PixelRatio</a></li><li><a style="margin-left:0;" class="" href="docs/pushnotificationios.html#content">PushNotificationIOS</a></li><li><a style="margin-left:0;" class="" href="docs/statusbarios.html#content">StatusBarIOS</a></li><li><a style="margin-left:0;" class="" href="docs/stylesheet.html#content">StyleSheet</a></li><li><a style="margin-left:0;" class="" href="docs/timepickerandroid.html#content">TimePickerAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/toastandroid.html#content">ToastAndroid</a></li><li><a style="margin-left:0;" class="" href="docs/vibrationios.html#content">VibrationIOS</a></li><li><a style="margin-left:0;" class="" href="docs/vibration.html#content">Vibration</a></li></ul></div><div class="nav-docs-section"><h3>Polyfills</h3><ul><li><a style="margin-left:0;" class="" href="docs/flexbox.html#content">Flexbox</a></li><li><a style="margin-left:0;" class="" href="docs/shadowproptypesios.html#content">ShadowPropTypesIOS</a></li><li><a style="margin-left:0;" class="" href="docs/geolocation.html#content">Geolocation</a></li><li><a style="margin-left:0;" class="" href="docs/network.html#content">Network</a></li><li><a style="margin-left:0;" class="" href="docs/timers.html#content">Timers</a></li><li><a style="margin-left:0;" class="" href="docs/colors.html#content">Colors</a></li></ul></div></div><div class="inner-content"><a id="content"></a><table width="100%"><tbody><tr><td><h1><a class="anchor" name="webview"></a>WebView <a class="hash-link" href="docs/webview.html#webview">#</a></h1></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Components/WebView/WebView.ios.js">Edit on GitHub</a></td></tr></tbody></table><div><div><p>Renders a native WebView.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/webview.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="view"></a><a href="docs/view.html#props">View props...</a> <a class="hash-link" href="docs/webview.html#view">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="automaticallyadjustcontentinsets"></a>automaticallyAdjustContentInsets <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#automaticallyadjustcontentinsets">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="contentinset"></a>contentInset <span class="propType">{top: number, left: number, bottom: number, right: number}</span> <a class="hash-link" href="docs/webview.html#contentinset">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="html"></a>html <span class="propType">string</span> <a class="hash-link" href="docs/webview.html#html">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use the <code>source</code> prop instead.</p></div></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="injectedjavascript"></a>injectedJavaScript <span class="propType">string</span> <a class="hash-link" href="docs/webview.html#injectedjavascript">#</a></h4><div><p>Sets the JS to be injected when the webpage loads.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="mediaplaybackrequiresuseraction"></a>mediaPlaybackRequiresUserAction <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#mediaplaybackrequiresuseraction">#</a></h4><div><p>Determines whether HTML5 audio &amp; videos require the user to tap before they can
start playing. The default value is <code>false</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onerror"></a>onError <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onerror">#</a></h4><div><p>Invoked when load fails</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onload"></a>onLoad <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onload">#</a></h4><div><p>Invoked when load finish</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadend"></a>onLoadEnd <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onloadend">#</a></h4><div><p>Invoked when load either succeeds or fails</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onloadstart"></a>onLoadStart <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onloadstart">#</a></h4><div><p>Invoked on load start</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onnavigationstatechange"></a>onNavigationStateChange <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onnavigationstatechange">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="rendererror"></a>renderError <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#rendererror">#</a></h4><div><p>Function that returns a view to show if there&#x27;s an error.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="renderloading"></a>renderLoading <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#renderloading">#</a></h4><div><p>Function that returns a loading indicator.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scalespagetofit"></a>scalesPageToFit <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#scalespagetofit">#</a></h4><div><p>Sets whether the webpage scales to fit the view and the user can change the scale.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="source"></a>source <span class="propType">{uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number</span> <a class="hash-link" href="docs/webview.html#source">#</a></h4><div><p>Loads static html or a uri (with optional headers) in the WebView.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="startinloadingstate"></a>startInLoadingState <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#startinloadingstate">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style <span class="propType"><a href="docs/view.html#style">View#style</a></span> <a class="hash-link" href="docs/webview.html#style">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="url"></a>url <span class="propType">string</span> <a class="hash-link" href="docs/webview.html#url">#</a></h4><div class="deprecated"><div class="deprecatedTitle"><img class="deprecatedIcon" src="img/Warning.png"><span>Deprecated</span></div><div class="deprecatedMessage"><div><p>Use the <code>source</code> prop instead.</p></div></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="domstorageenabled"></a><span class="platform">android</span>domStorageEnabled <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#domstorageenabled">#</a></h4><div><p>Used on Android only, controls whether DOM Storage is enabled or not</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="javascriptenabled"></a><span class="platform">android</span>javaScriptEnabled <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#javascriptenabled">#</a></h4><div><p>Used on Android only, JS is enabled by default for WebView on iOS</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="allowsinlinemediaplayback"></a><span class="platform">ios</span>allowsInlineMediaPlayback <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#allowsinlinemediaplayback">#</a></h4><div><p>Determines whether HTML5 videos play inline or use the native full-screen
controller.
default value <code>false</code>
<strong>NOTE</strong> : &quot;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.&quot;</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="bounces"></a><span class="platform">ios</span>bounces <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#bounces">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="decelerationrate"></a><span class="platform">ios</span>decelerationRate <span class="propType">ScrollView.propTypes.decelerationRate</span> <a class="hash-link" href="docs/webview.html#decelerationrate">#</a></h4><div><p>A floating-point number that determines how quickly the scroll view
decelerates after the user lifts their finger. You may also use string
shortcuts <code>&quot;normal&quot;</code> and <code>&quot;fast&quot;</code> which match the underlying iOS settings
for <code>UIScrollViewDecelerationRateNormal</code> and
<code>UIScrollViewDecelerationRateFast</code> respectively.
- normal: 0.998
- fast: 0.99 (the default for iOS WebView)</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onshouldstartloadwithrequest"></a><span class="platform">ios</span>onShouldStartLoadWithRequest <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onshouldstartloadwithrequest">#</a></h4><div><p>Allows custom handling of any webview requests by a JS handler. Return true
or false from this method to continue loading the request.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a><span class="platform">ios</span>scrollEnabled <span class="propType">bool</span> <a class="hash-link" href="docs/webview.html#scrollenabled">#</a></h4></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/webview.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="goforward"></a>goForward<span class="propType">()</span> <a class="hash-link" href="docs/webview.html#goforward">#</a></h4><div><p>Go forward one page in the webview&#x27;s history.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="goback"></a>goBack<span class="propType">()</span> <a class="hash-link" href="docs/webview.html#goback">#</a></h4><div><p>Go back one page in the webview&#x27;s history.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="reload"></a>reload<span class="propType">()</span> <a class="hash-link" href="docs/webview.html#reload">#</a></h4><div><p>Reloads the current page.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stoploading"></a>stopLoading<span class="propType">()</span> <a class="hash-link" href="docs/webview.html#stoploading">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getwebviewhandle"></a>getWebViewHandle<span class="propType">(): any</span> <a class="hash-link" href="docs/webview.html#getwebviewhandle">#</a></h4><div><p>Returns the native webview node.</p></div></div></div></span></div><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/webview.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/WebViewExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token punctuation">{</span>
StyleSheet<span class="token punctuation">,</span>
Text<span class="token punctuation">,</span>
TextInput<span class="token punctuation">,</span>
TouchableWithoutFeedback<span class="token punctuation">,</span>
TouchableOpacity<span class="token punctuation">,</span>
View<span class="token punctuation">,</span>
WebView
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
<span class="token keyword">var</span> HEADER <span class="token operator">=</span> <span class="token string">&#x27;#3b5998&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> BGWASH <span class="token operator">=</span> <span class="token string">&#x27;rgba(255,255,255,0.8)&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> DISABLED_WASH <span class="token operator">=</span> <span class="token string">&#x27;rgba(255,255,255,0.25)&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> TEXT_INPUT_REF <span class="token operator">=</span> <span class="token string">&#x27;urlInput&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> WEBVIEW_REF <span class="token operator">=</span> <span class="token string">&#x27;webview&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> DEFAULT_URL <span class="token operator">=</span> <span class="token string">&#x27;https://m.facebook.com&#x27;</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> WebViewExample <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
getInitialState<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
url<span class="token punctuation">:</span> DEFAULT_URL<span class="token punctuation">,</span>
status<span class="token punctuation">:</span> <span class="token string">&#x27;No Page Loaded&#x27;</span><span class="token punctuation">,</span>
backButtonEnabled<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
forwardButtonEnabled<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
loading<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
scalesPageToFit<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
inputText<span class="token punctuation">:</span> <span class="token string">&#x27;&#x27;</span><span class="token punctuation">,</span>
handleTextInputChange<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> url <span class="token operator">=</span> event<span class="token punctuation">.</span>nativeEvent<span class="token punctuation">.</span>text<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token regex">/^[a-zA-Z-_]+:/</span><span class="token punctuation">.</span><span class="token function">test<span class="token punctuation">(</span></span>url<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
url <span class="token operator">=</span> <span class="token string">&#x27;http://&#x27;</span> <span class="token operator">+</span> url<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>inputText <span class="token operator">=</span> url<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>inputText <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>url<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>addressBarRow<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;TouchableOpacity
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>goBack<span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>backButtonEnabled <span class="token operator">?</span> styles<span class="token punctuation">.</span>navButton <span class="token punctuation">:</span> styles<span class="token punctuation">.</span>disabledButton<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>
<span class="token punctuation">{</span><span class="token string">&#x27;&lt;&#x27;</span><span class="token punctuation">}</span>
&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableOpacity<span class="token operator">&gt;</span>
&lt;TouchableOpacity
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>goForward<span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>forwardButtonEnabled <span class="token operator">?</span> styles<span class="token punctuation">.</span>navButton <span class="token punctuation">:</span> styles<span class="token punctuation">.</span>disabledButton<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>
<span class="token punctuation">{</span><span class="token string">&#x27;&gt;&#x27;</span><span class="token punctuation">}</span>
&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableOpacity<span class="token operator">&gt;</span>
&lt;TextInput
ref<span class="token operator">=</span><span class="token punctuation">{</span>TEXT_INPUT_REF<span class="token punctuation">}</span>
autoCapitalize<span class="token operator">=</span><span class="token string">&quot;none&quot;</span>
defaultValue<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>url<span class="token punctuation">}</span>
onSubmitEditing<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onSubmitEditing<span class="token punctuation">}</span>
onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>handleTextInputChange<span class="token punctuation">}</span>
clearButtonMode<span class="token operator">=</span><span class="token string">&quot;while-editing&quot;</span>
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>addressBarTextInput<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;TouchableOpacity onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>pressGoButton<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>goButton<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>
Go<span class="token operator">!</span>
&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableOpacity<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;WebView
ref<span class="token operator">=</span><span class="token punctuation">{</span>WEBVIEW_REF<span class="token punctuation">}</span>
automaticallyAdjustContentInsets<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>webView<span class="token punctuation">}</span>
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>url<span class="token punctuation">}</span><span class="token punctuation">}</span>
javaScriptEnabled<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
domStorageEnabled<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
decelerationRate<span class="token operator">=</span><span class="token string">&quot;normal&quot;</span>
onNavigationStateChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onNavigationStateChange<span class="token punctuation">}</span>
onShouldStartLoadWithRequest<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onShouldStartLoadWithRequest<span class="token punctuation">}</span>
startInLoadingState<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
scalesPageToFit<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>scalesPageToFit<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>statusBar<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>statusBarText<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>status<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
goBack<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>refs<span class="token punctuation">[</span>WEBVIEW_REF<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">goBack<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
goForward<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>refs<span class="token punctuation">[</span>WEBVIEW_REF<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">goForward<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
reload<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>refs<span class="token punctuation">[</span>WEBVIEW_REF<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">reload<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
onShouldStartLoadWithRequest<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // Implement any custom loading logic here, don&#x27;t forget to return!
</span> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
onNavigationStateChange<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>navState<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
backButtonEnabled<span class="token punctuation">:</span> navState<span class="token punctuation">.</span>canGoBack<span class="token punctuation">,</span>
forwardButtonEnabled<span class="token punctuation">:</span> navState<span class="token punctuation">.</span>canGoForward<span class="token punctuation">,</span>
url<span class="token punctuation">:</span> navState<span class="token punctuation">.</span>url<span class="token punctuation">,</span>
status<span class="token punctuation">:</span> navState<span class="token punctuation">.</span>title<span class="token punctuation">,</span>
loading<span class="token punctuation">:</span> navState<span class="token punctuation">.</span>loading<span class="token punctuation">,</span>
scalesPageToFit<span class="token punctuation">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
onSubmitEditing<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">pressGoButton<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
pressGoButton<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> url <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>inputText<span class="token punctuation">.</span><span class="token function">toLowerCase<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>url <span class="token operator">===</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>url<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">reload<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
url<span class="token punctuation">:</span> url<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment" spellcheck="true"> // dismiss keyboard
</span> <span class="token keyword">this</span><span class="token punctuation">.</span>refs<span class="token punctuation">[</span>TEXT_INPUT_REF<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">blur<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> Button <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
_handlePress<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>enabled <span class="token operator">!</span><span class="token operator">==</span> <span class="token boolean">false</span> &amp;&amp; <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>onPress<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onPress<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;TouchableWithoutFeedback onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_handlePress<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>enabled <span class="token operator">?</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">:</span> styles<span class="token punctuation">.</span>buttonDisabled<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>buttonText<span class="token punctuation">}</span><span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>text<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableWithoutFeedback<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> ScaledWebView <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
getInitialState<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
scalingEnabled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;View<span class="token operator">&gt;</span>
&lt;WebView
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
backgroundColor<span class="token punctuation">:</span> BGWASH<span class="token punctuation">,</span>
height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span>
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">&#x27;https://facebook.github.io/react/&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
scalesPageToFit<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>scalingEnabled<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>buttons<span class="token punctuation">}</span><span class="token operator">&gt;</span>
<span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>scalingEnabled <span class="token operator">?</span>
&lt;Button
text<span class="token operator">=</span><span class="token string">&quot;Scaling:ON&quot;</span>
enabled<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>scalingEnabled<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span> <span class="token punctuation">:</span>
&lt;Button
text<span class="token operator">=</span><span class="token string">&quot;Scaling:OFF&quot;</span>
enabled<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>scalingEnabled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span> <span class="token punctuation">}</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
container<span class="token punctuation">:</span> <span class="token punctuation">{</span>
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
backgroundColor<span class="token punctuation">:</span> HEADER<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
addressBarRow<span class="token punctuation">:</span> <span class="token punctuation">{</span>
flexDirection<span class="token punctuation">:</span> <span class="token string">&#x27;row&#x27;</span><span class="token punctuation">,</span>
padding<span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
webView<span class="token punctuation">:</span> <span class="token punctuation">{</span>
backgroundColor<span class="token punctuation">:</span> BGWASH<span class="token punctuation">,</span>
height<span class="token punctuation">:</span> <span class="token number">350</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
addressBarTextInput<span class="token punctuation">:</span> <span class="token punctuation">{</span>
backgroundColor<span class="token punctuation">:</span> BGWASH<span class="token punctuation">,</span>
borderColor<span class="token punctuation">:</span> <span class="token string">&#x27;transparent&#x27;</span><span class="token punctuation">,</span>
borderRadius<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
borderWidth<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
height<span class="token punctuation">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
paddingLeft<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
paddingTop<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
paddingBottom<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
fontSize<span class="token punctuation">:</span> <span class="token number">14</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
navButton<span class="token punctuation">:</span> <span class="token punctuation">{</span>
width<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
padding<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
marginRight<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
alignItems<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
justifyContent<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
backgroundColor<span class="token punctuation">:</span> BGWASH<span class="token punctuation">,</span>
borderColor<span class="token punctuation">:</span> <span class="token string">&#x27;transparent&#x27;</span><span class="token punctuation">,</span>
borderRadius<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
disabledButton<span class="token punctuation">:</span> <span class="token punctuation">{</span>
width<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
padding<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
marginRight<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
alignItems<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
justifyContent<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
backgroundColor<span class="token punctuation">:</span> DISABLED_WASH<span class="token punctuation">,</span>
borderColor<span class="token punctuation">:</span> <span class="token string">&#x27;transparent&#x27;</span><span class="token punctuation">,</span>
borderRadius<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
goButton<span class="token punctuation">:</span> <span class="token punctuation">{</span>
height<span class="token punctuation">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
padding<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
marginLeft<span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
alignItems<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
backgroundColor<span class="token punctuation">:</span> BGWASH<span class="token punctuation">,</span>
borderColor<span class="token punctuation">:</span> <span class="token string">&#x27;transparent&#x27;</span><span class="token punctuation">,</span>
borderRadius<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
alignSelf<span class="token punctuation">:</span> <span class="token string">&#x27;stretch&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
statusBar<span class="token punctuation">:</span> <span class="token punctuation">{</span>
flexDirection<span class="token punctuation">:</span> <span class="token string">&#x27;row&#x27;</span><span class="token punctuation">,</span>
alignItems<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
paddingLeft<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
height<span class="token punctuation">:</span> <span class="token number">22</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
statusBarText<span class="token punctuation">:</span> <span class="token punctuation">{</span>
color<span class="token punctuation">:</span> <span class="token string">&#x27;white&#x27;</span><span class="token punctuation">,</span>
fontSize<span class="token punctuation">:</span> <span class="token number">13</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
spinner<span class="token punctuation">:</span> <span class="token punctuation">{</span>
width<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
marginRight<span class="token punctuation">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
buttons<span class="token punctuation">:</span> <span class="token punctuation">{</span>
flexDirection<span class="token punctuation">:</span> <span class="token string">&#x27;row&#x27;</span><span class="token punctuation">,</span>
height<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;black&#x27;</span><span class="token punctuation">,</span>
alignItems<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span>
justifyContent<span class="token punctuation">:</span> <span class="token string">&#x27;space-between&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
button<span class="token punctuation">:</span> <span class="token punctuation">{</span>
flex<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>
width<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
margin<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
borderColor<span class="token punctuation">:</span> <span class="token string">&#x27;gray&#x27;</span><span class="token punctuation">,</span>
borderWidth<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;gray&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
const HTML <span class="token operator">=</span> `
&lt;<span class="token operator">!</span>DOCTYPE html<span class="token operator">&gt;</span>\n
&lt;html<span class="token operator">&gt;</span>
&lt;head<span class="token operator">&gt;</span>
&lt;title<span class="token operator">&gt;</span>Hello Static World&lt;<span class="token operator">/</span>title<span class="token operator">&gt;</span>
&lt;meta http<span class="token operator">-</span>equiv<span class="token operator">=</span><span class="token string">&quot;content-type&quot;</span> content<span class="token operator">=</span><span class="token string">&quot;text/html; charset=utf-8&quot;</span><span class="token operator">&gt;</span>
&lt;meta name<span class="token operator">=</span><span class="token string">&quot;viewport&quot;</span> content<span class="token operator">=</span><span class="token string">&quot;width=320, user-scalable=no&quot;</span><span class="token operator">&gt;</span>
&lt;style type<span class="token operator">=</span><span class="token string">&quot;text/css&quot;</span><span class="token operator">&gt;</span>
body <span class="token punctuation">{</span>
margin<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
padding<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
font<span class="token punctuation">:</span> <span class="token number">62.5</span><span class="token operator">%</span> arial<span class="token punctuation">,</span> sans<span class="token operator">-</span>serif<span class="token punctuation">;</span>
background<span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
h1 <span class="token punctuation">{</span>
padding<span class="token punctuation">:</span> 45px<span class="token punctuation">;</span>
margin<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
text<span class="token operator">-</span>align<span class="token punctuation">:</span> center<span class="token punctuation">;</span>
color<span class="token punctuation">:</span> #33f<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
&lt;<span class="token operator">/</span>style<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>head<span class="token operator">&gt;</span>
&lt;body<span class="token operator">&gt;</span>
&lt;h1<span class="token operator">&gt;</span>Hello Static World&lt;<span class="token operator">/</span>h1<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>body<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>html<span class="token operator">&gt;</span>
`<span class="token punctuation">;</span>
exports<span class="token punctuation">.</span>displayName <span class="token operator">=</span> <span class="token punctuation">(</span>undefined<span class="token punctuation">:</span> <span class="token operator">?</span>string<span class="token punctuation">)</span><span class="token punctuation">;</span>
exports<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">&#x27;&lt;WebView&gt;&#x27;</span><span class="token punctuation">;</span>
exports<span class="token punctuation">.</span>description <span class="token operator">=</span> <span class="token string">&#x27;Base component to display web content&#x27;</span><span class="token punctuation">;</span>
exports<span class="token punctuation">.</span>examples <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">&#x27;Simple Browser&#x27;</span><span class="token punctuation">,</span>
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span> <span class="token keyword">return</span> &lt;WebViewExample <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">&#x27;Scale Page to Fit&#x27;</span><span class="token punctuation">,</span>
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span> <span class="token keyword">return</span> &lt;ScaledWebView<span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">&#x27;Bundled HTML&#x27;</span><span class="token punctuation">,</span>
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;WebView
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
backgroundColor<span class="token punctuation">:</span> BGWASH<span class="token punctuation">,</span>
height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span>
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;./helloworld.html&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
scalesPageToFit<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">&#x27;Static HTML&#x27;</span><span class="token punctuation">,</span>
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;WebView
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
backgroundColor<span class="token punctuation">:</span> BGWASH<span class="token punctuation">,</span>
height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span>
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>html<span class="token punctuation">:</span> HTML<span class="token punctuation">}</span><span class="token punctuation">}</span>
scalesPageToFit<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
title<span class="token punctuation">:</span> <span class="token string">&#x27;POST Test&#x27;</span><span class="token punctuation">,</span>
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;WebView
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
backgroundColor<span class="token punctuation">:</span> BGWASH<span class="token punctuation">,</span>
height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span>
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
uri<span class="token punctuation">:</span> <span class="token string">&#x27;http://www.posttestserver.com/post.php&#x27;</span><span class="token punctuation">,</span>
method<span class="token punctuation">:</span> <span class="token string">&#x27;POST&#x27;</span><span class="token punctuation">,</span>
body<span class="token punctuation">:</span> <span class="token string">&#x27;foo=bar&amp;bar=foo&#x27;</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span>
scalesPageToFit<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span></div></div></div><div class="docs-prevnext"><a class="docs-next" href="docs/actionsheetios.html#content">Next →</a></div></div><div class="column-left"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&amp;scale=60&amp;autoplay=false&amp;orientation=portrait&amp;deviceColor=white&amp;params=%7B%22route%22%3A%22WebView%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></section><footer class="wrap"><div class="center">© 2016 Facebook Inc.</div></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'facebook.github.io');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
docsearch({
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#algolia-doc-search',
algoliaOptions: { facetFilters: [ "tags:0.26" ], hitsPerPage: 5 }
});
</script><script src="js/scripts.js"></script></body></html>
Reference in New Issue View Git Blame Copy Permalink