automaticallyAdjustContentInset 布爾型
contentInset {top: number, left: number, bottom: number, right: number}
html 字符串型
onNavigationStateChange 函數(shù)
renderError 函數(shù)
renderLoading 函數(shù)
shouldInjectAJAXHandler 布爾型
startInLoadingState 布爾型
style View#style
url 字符串型
[Edit on GitHub](Edit on GitHub)
'use strict';var React = require('react-native');var StyleSheet = require('StyleSheet');var { StyleSheet, Text, TextInput, 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, }; }, inputText: '', handleTextInputChange: function(event) { this.inputText = event.nativeEvent.text; }, render: function() { this.inputText = this.state.url; return ( <View style={[styles.container]}> <View style={[styles.addressBarRow]}> <TouchableOpacity onPress={this.goBack}> <View style={this.state.backButtonEnabled ? styles.navButton : styles.disabledButton}> <Text> {'<'} </Text> </View> </TouchableOpacity> <TouchableOpacity onPress={this.goForward}> <View style={this.state.forwardButtonEnabled ? styles.navButton : styles.disabledButton}> <Text> {'>'} </Text> </View> </TouchableOpacity> <TextInput ref={TEXT_INPUT_REF} autoCapitalize="none" value={this.state.url} onSubmitEditing={this.onSubmitEditing} onChange={this.handleTextInputChange} clearButtonMode="while-editing" style={styles.addressBarTextInput} /> <TouchableOpacity onPress={this.pressGoButton}> <View style={styles.goButton}> <Text> Go! </Text> </View> </TouchableOpacity> </View> <WebView ref={WEBVIEW_REF} automaticallyAdjustContentInsets={false} style={styles.webView} url={this.state.url} onNavigationStateChange={this.onNavigationStateChange} startInLoadingState={true} /> <View style={styles.statusBar}> <Text style={styles.statusBarText}>{this.state.status}</Text> </View> </View> ); }, goBack: function() { this.refs[WEBVIEW_REF].goBack(); }, goForward: function() { this.refs[WEBVIEW_REF].goForward(); }, reload: function() { this.refs[WEBVIEW_REF].reload(); }, onNavigationStateChange: function(navState) { this.setState({ backButtonEnabled: navState.canGoBack, forwardButtonEnabled: navState.canGoForward, url: navState.url, status: navState.title, loading: navState.loading, }); }, 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 keyoard this.refs[TEXT_INPUT_REF].blur(); }, });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, }, }); exports.title = '<WebView>'; exports.description = 'Base component to display web content'; exports.examples = [ { title: 'WebView', render(): ReactElement { return <WebViewExample />; } } ];
更多建議: