工具
automaticallyAdjustContentInset 布尔型
contentInset {top: number, left: number, bottom: number, right: number}
html 字符串型
onNavigationStateChange 函数
renderError 函数
renderLoading 函数
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 />; } } ];
作者:冒牌SEO,如若转载,请注明出处:https://www.web176.com/reactnative/22040.html