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

Updated docs for next

Browse Source
This commit is contained in:
Website Deployment Script
2016-10-16 15:21:03 +00:00
parent 772df790fc
commit f2dbd72fd4
1 changed files with 56 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
releases/next/docs/webview.html
+56 -1
View File
@@ -16,7 +16,11 @@ placed behind a navigation bar, tab bar, or toolbar. The default value
is <code>true</code>.</p></div></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><p>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}.</p></div></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>Set this to provide JavaScript that will be injected into the web page
when the view 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>Boolean that determines whether HTML5 audio and video requires the user
to tap them before they start playing. The default value is <code>true</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>Function that is invoked when the <code>WebView</code> 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>Function that is invoked when the <code>WebView</code> has finished loading.</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>Function that is invoked when the <code>WebView</code> load 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>Function that is invoked when the <code>WebView</code> starts loading.</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><p>Function that is invoked when the <code>WebView</code> loading starts or ends.</p></div></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>Boolean that controls whether the web content is scaled to fit
to tap them before they start playing. The default value is <code>true</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>Function that is invoked when the <code>WebView</code> 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>Function that is invoked when the <code>WebView</code> has finished loading.</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>Function that is invoked when the <code>WebView</code> load 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>Function that is invoked when the <code>WebView</code> starts loading.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onmessage"></a>onMessage <span class="propType">function</span> <a class="hash-link" href="docs/webview.html#onmessage">#</a></h4><div><p>A function that is invoked when the webview calls <code>window.postMessage</code>.
Setting this property will inject a <code>postMessage</code> global into your
webview, but will still call pre-existing values of <code>postMessage</code>.</p><p><code>window.postMessage</code> accepts one argument, <code>data</code>, which will be
available on the event object, <code>event.nativeEvent.data</code>. <code>data</code>
must be a string.</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><p>Function that is invoked when the <code>WebView</code> loading starts or ends.</p></div></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>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 <code>true</code>.</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><p>Boolean value that forces the <code>WebView</code> to show the loading view
on the first load.</p></div></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><p>The style to apply to the <code>WebView</code>.</p></div></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>Boolean value to control whether DOM Storage is enabled. Used only in
@@ -230,6 +234,53 @@ class <span class="token class-name">ScaledWebView</span> extends <span class="t
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
class <span class="token class-name">MessagingTest</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
webview <span class="token operator">=</span> <span class="token keyword">null</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
messagesReceivedFromWebView<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
message<span class="token punctuation">:</span> <span class="token string">&#x27;&#x27;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
onMessage <span class="token operator">=</span> e <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>
messagesReceivedFromWebView<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>messagesReceivedFromWebView <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>
message<span class="token punctuation">:</span> e<span class="token punctuation">.</span>nativeEvent<span class="token punctuation">.</span>data<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
postMessage <span class="token operator">=</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>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>webview<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>webview<span class="token punctuation">.</span><span class="token function">postMessage<span class="token punctuation">(</span></span><span class="token string">&#x27;&quot;Hello&quot; from React Native!&#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 function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement&lt;any<span class="token operator">&gt;</span> <span class="token punctuation">{</span>
const <span class="token punctuation">{</span>messagesReceivedFromWebView<span class="token punctuation">,</span> message<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<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> 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><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>container<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span>Messages received from web view<span class="token punctuation">:</span> <span class="token punctuation">{</span>messagesReceivedFromWebView<span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;Text<span class="token operator">&gt;</span><span class="token punctuation">{</span>message <span class="token operator">||</span> <span class="token string">&#x27;(No message)&#x27;</span><span class="token punctuation">}</span>&lt;<span class="token operator">/</span>Text<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>
&lt;Button text<span class="token operator">=</span><span class="token string">&quot;Send Message to Web View&quot;</span> enabled onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>postMessage<span class="token punctuation">}</span> <span class="token operator">/</span><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>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;WebView
ref<span class="token operator">=</span><span class="token punctuation">{</span>webview <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>webview <span class="token operator">=</span> webview<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
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;./messagingtest.html&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
onMessage<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onMessage<span class="token punctuation">}</span>
<span class="token operator">/</span><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>
<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>
@@ -404,6 +455,10 @@ exports<span class="token punctuation">.</span>examples <span class="token opera
<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;Mesaging 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&lt;any<span class="token operator">&gt;</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> &lt;MessagingTest <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></div><div class="embedded-simulator"><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></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/viewpagerandroid.html#content">← Prev</a><a class="docs-next" href="docs/actionsheetios.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://productpains.com/product/react-native/" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2016 Facebook Inc.</section></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(){