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
292f035ae8b4a7fdffafb5f3c74e69bbde7bc7ea
react-native/website/versioned_docs/0.22/webview.md
T
Hector Ramos 732831dc27 Progress :D
2017-10-27 11:51:58 -07:00

60 KiB
Raw Blame History

id, title, original_id
id title original_id
version-0.22-webview webview webview

WebView #

Edit on GitHub

Renders a native WebView.

Props #

automaticallyAdjustContentInsets bool #

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

html string #

Deprecated

Use the source prop instead.

injectedJavaScript string #

Sets the JS to be injected when the webpage loads.

onError function #

Invoked when load fails

onLoad function #

Invoked when load finish

onLoadEnd function #

Invoked when load either succeeds or fails

onLoadStart function #

Invoked on load start

onNavigationStateChange function #

renderError function #

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

renderLoading function #

Function that returns a loading indicator.

scalesPageToFit bool #

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

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

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

startInLoadingState bool #

url string #

Deprecated

Use the source prop instead.

androiddomStorageEnabled bool #

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

androidjavaScriptEnabled bool #

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

iosallowsInlineMediaPlayback bool #

Determines whether HTML5 videos play inline or use the native full-screen controller. default value false NOTE : "In order for video to play inline, not only does this property need to be set to true, but the video element in the HTML document must also include the webkit-playsinline attribute."

iosbounces bool #

iosdecelerationRate ScrollView.propTypes.decelerationRate #

A floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. You may also use string shortcuts "normal" and "fast" which match the underlying iOS settings for UIScrollViewDecelerationRateNormal and UIScrollViewDecelerationRateFast respectively.

  • Normal: 0.998
  • Fast: 0.9 (the default for iOS WebView)

iosonShouldStartLoadWithRequest function #

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

iosscrollEnabled bool #

Examples #

Edit on GitHub
'use strict';

var React = require('react-native'); var { StyleSheet, Text, TextInput, TouchableWithoutFeedback, TouchableOpacity, View, WebView } = React;

var HEADER = '#3b5998'; var BGWASH = 'rgba(255,255,255,0.8)'; var DISABLED_WASH = 'rgba(255,255,255,0.25)';

var TEXT_INPUT_REF = 'urlInput'; var WEBVIEW_REF = 'webview'; var DEFAULT_URL = 'https://m.facebook.com';

var WebViewExample = React.createClass({

getInitialState: function() { return { url: DEFAULT_URL, status: 'No Page Loaded', backButtonEnabled: false, forwardButtonEnabled: false, loading: true, scalesPageToFit: true, }; },

inputText: '',

handleTextInputChange: function(event) { var url = event.nativeEvent.text; if (!/^[a-zA-Z-_]+:/.test(url)) { url = 'http://' + url; } this.inputText = url; },

render: function() { this.inputText = this.state.url;

<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">'&lt;'</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">'&gt;'</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">"none"</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">"while-editing"</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">"normal"</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>

},

goBack: function() { this.refs[WEBVIEW_REF].goBack(); },

goForward: function() { this.refs[WEBVIEW_REF].goForward(); },

reload: function() { this.refs[WEBVIEW_REF].reload(); },

onShouldStartLoadWithRequest: function(event) { // Implement any custom loading logic here, don't forget to return! return true; },

onNavigationStateChange: function(navState) { this.setState({ backButtonEnabled: navState.canGoBack, forwardButtonEnabled: navState.canGoForward, url: navState.url, status: navState.title, loading: navState.loading, scalesPageToFit: true }); },

onSubmitEditing: function(event) { this.pressGoButton(); },

pressGoButton: function() { var url = this.inputText.toLowerCase(); if (url === this.state.url) { this.reload(); } else { this.setState({ url: url, }); } // dismiss keyboard this.refs[TEXT_INPUT_REF].blur(); },

});

var Button = React.createClass({ _handlePress: function() { if (this.props.enabled !== false && this.props.onPress) { this.props.onPress(); } }, render: function() { return ( <TouchableWithoutFeedback onPress={this._handlePress}> <View style={[styles.button, this.props.enabled ? {} : styles.buttonDisabled]}> <Text style={styles.buttonText}>{this.props.text}</Text> </View> </TouchableWithoutFeedback> ); } });

var ScaledWebView = React.createClass({

getInitialState: function() { return { scalingEnabled: true, } },

render: function() { return ( <View> <WebView style={{ backgroundColor: BGWASH, height: 200, }} source={{uri: 'https://facebook.github.io/react/'}} scalesPageToFit={this.state.scalingEnabled} /> <View style={styles.buttons}> { this.state.scalingEnabled ? <Button text="Scaling:ON" enabled={true} onPress={() => this.setState({scalingEnabled: false})} /> : <Button text="Scaling:OFF" enabled={true} onPress={() => this.setState({scalingEnabled: true})} /> } </View> </View> ); }, })

var styles = StyleSheet.create({ container: { flex: 1, backgroundColor: HEADER, }, addressBarRow: { flexDirection: 'row', padding: 8, }, webView: { backgroundColor: BGWASH, height: 350, }, addressBarTextInput: { backgroundColor: BGWASH, borderColor: 'transparent', borderRadius: 3, borderWidth: 1, height: 24, paddingLeft: 10, paddingTop: 3, paddingBottom: 3, flex: 1, fontSize: 14, }, navButton: { width: 20, padding: 3, marginRight: 3, alignItems: 'center', justifyContent: 'center', backgroundColor: BGWASH, borderColor: 'transparent', borderRadius: 3, }, disabledButton: { width: 20, padding: 3, marginRight: 3, alignItems: 'center', justifyContent: 'center', backgroundColor: DISABLED_WASH, borderColor: 'transparent', borderRadius: 3, }, goButton: { height: 24, padding: 3, marginLeft: 8, alignItems: 'center', backgroundColor: BGWASH, borderColor: 'transparent', borderRadius: 3, alignSelf: 'stretch', }, statusBar: { flexDirection: 'row', alignItems: 'center', paddingLeft: 5, height: 22, }, statusBarText: { color: 'white', fontSize: 13, }, spinner: { width: 20, marginRight: 6, }, buttons: { flexDirection: 'row', height: 30, backgroundColor: 'black', alignItems: 'center', justifyContent: 'space-between', }, button: { flex: 0.5, width: 0, margin: 5, borderColor: 'gray', borderWidth: 1, backgroundColor: 'gray', }, });

const HTML = &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">"content-type"</span> content<span class="token operator">=</span><span class="token string">"text/html; charset=utf-8"</span><span class="token operator">&gt;</span> &lt;meta name<span class="token operator">=</span><span class="token string">"viewport"</span> content<span class="token operator">=</span><span class="token string">"width=320, user-scalable=no"</span><span class="token operator">&gt;</span> &lt;style type<span class="token operator">=</span><span class="token string">"text/css"</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>;

exports.displayName = (undefined: ?string); exports.title = '<WebView>'; exports.description = 'Base component to display web content'; exports.examples = [ { title: 'Simple Browser', render(): ReactElement { return <WebViewExample />; } }, { title: 'Scale Page to Fit', render(): ReactElement { return <ScaledWebView/>; } }, { title: 'Bundled HTML', render(): ReactElement { return ( <WebView style={{ backgroundColor: BGWASH, height: 100, }} source={require('./helloworld.html')} scalesPageToFit={true} /> ); } }, { title: 'Static HTML', render(): ReactElement { return ( <WebView style={{ backgroundColor: BGWASH, height: 100, }} source={{html: HTML}} scalesPageToFit={true} /> ); } }, { title: 'POST Test', render(): ReactElement { return ( <WebView style={{ backgroundColor: BGWASH, height: 100, }} source={{ uri: 'http://www.posttestserver.com/post.php', method: 'POST', body: 'foo=bar&bar=foo' }} scalesPageToFit={false} /> ); } } ];

Reference in New Issue View Git Blame Copy Permalink