Web 视图

工具

Edit on GitHub

automaticallyAdjustContentInset 布尔型

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

html 字符串型

onNavigationStateChange 函数

renderError 函数

renderLoading 函数

shouldInjectAJAXHandler 布尔型

startInLoadingState 布尔型

style View#style

url 字符串型

例子

Edit on GitHub

1. 'use strict';
2. var React = require('react-native');
3. var StyleSheet = require('StyleSheet');
4. var {
5. StyleSheet,
6. Text,
7. TextInput,
8. TouchableOpacity,
9. View,
10. WebView
11. } = React;
12. var HEADER = '#3b5998';
13. var BGWASH = 'rgba(255,255,255,0.8)';
14. var DISABLED_WASH = 'rgba(255,255,255,0.25)';
15. var TEXT_INPUT_REF = 'urlInput';
16. var WEBVIEW_REF = 'webview';
17. var DEFAULT_URL = 'https://m.facebook.com';
18. var WebViewExample = React.createClass({
19. getInitialState: function() {
20. return {
21. url: DEFAULT_URL,
22. status: 'No Page Loaded',
23. backButtonEnabled: false,
24. forwardButtonEnabled: false,
25. loading: true,
26. };
27. },
28. inputText: '',
29. handleTextInputChange: function(event) {
30. this.inputText = event.nativeEvent.text;
31. },
32. render: function() {
33. this.inputText = this.state.url;
34. return (
35. <View style={[styles.container]}>
36. <View style={[styles.addressBarRow]}>
37. <TouchableOpacity onPress={this.goBack}>
38. <View style={this.state.backButtonEnabled ? styles.navButton : styles.disabledButton}>
39. <Text>
40. {'<'}
41. </Text>
42. </View>
43. </TouchableOpacity>
44. <TouchableOpacity onPress={this.goForward}>
45. <View style={this.state.forwardButtonEnabled ? styles.navButton : styles.disabledButton}>
46. <Text>
47. {'>'}
48. </Text>
49. </View>
50. </TouchableOpacity>
51. <TextInput
52. ref={TEXT_INPUT_REF}
53. autoCapitalize="none"
54. value={this.state.url}
55. onSubmitEditing={this.onSubmitEditing}
56. onChange={this.handleTextInputChange}
57. clearButtonMode="while-editing"
58. style={styles.addressBarTextInput}
59. />
60. <TouchableOpacity onPress={this.pressGoButton}>
61. <View style={styles.goButton}>
62. <Text>
63. Go!
64. </Text>
65. </View>
66. </TouchableOpacity>
67. </View>
68. <WebView
69. ref={WEBVIEW_REF}
70. automaticallyAdjustContentInsets={false}
71. style={styles.webView}
72. url={this.state.url}
73. onNavigationStateChange={this.onNavigationStateChange}
74. startInLoadingState={true}
75. />
76. <View style={styles.statusBar}>
77. <Text style={styles.statusBarText}>{this.state.status}</Text>
78. </View>
79. </View>
80. );
81. },
82. goBack: function() {
83. this.refs[WEBVIEW_REF].goBack();
84. },
85. goForward: function() {
86. this.refs[WEBVIEW_REF].goForward();
87. },
88. reload: function() {
89. this.refs[WEBVIEW_REF].reload();
90. },
91. onNavigationStateChange: function(navState) {
92. this.setState({
93. backButtonEnabled: navState.canGoBack,
94. forwardButtonEnabled: navState.canGoForward,
95. url: navState.url,
96. status: navState.title,
97. loading: navState.loading,
98. });
99. },
100. onSubmitEditing: function(event) {
101. this.pressGoButton();
102. },
103. pressGoButton: function() {
104. var url = this.inputText.toLowerCase();
105. if (url === this.state.url) {
106. this.reload();
107. } else {
108. this.setState({
109. url: url,
110. });
111. }
112. // dismiss keyoard
113. this.refs[TEXT_INPUT_REF].blur();
114. },
115. });
116. var styles = StyleSheet.create({
117. container: {
118. flex: 1,
119. backgroundColor: HEADER,
120. },
121. addressBarRow: {
122. flexDirection: 'row',
123. padding: 8,
124. },
125. webView: {
126. backgroundColor: BGWASH,
127. height: 350,
128. },
129. addressBarTextInput: {
130. backgroundColor: BGWASH,
131. borderColor: 'transparent',
132. borderRadius: 3,
133. borderWidth: 1,
134. height: 24,
135. paddingLeft: 10,
136. paddingTop: 3,
137. paddingBottom: 3,
138. flex: 1,
139. fontSize: 14,
140. },
141. navButton: {
142. width: 20,
143. padding: 3,
144. marginRight: 3,
145. alignItems: 'center',
146. justifyContent: 'center',
147. backgroundColor: BGWASH,
148. borderColor: 'transparent',
149. borderRadius: 3,
150. },
151. disabledButton: {
152. width: 20,
153. padding: 3,
154. marginRight: 3,
155. alignItems: 'center',
156. justifyContent: 'center',
157. backgroundColor: DISABLED_WASH,
158. borderColor: 'transparent',
159. borderRadius: 3,
160. },
161. goButton: {
162. height: 24,
163. padding: 3,
164. marginLeft: 8,
165. alignItems: 'center',
166. backgroundColor: BGWASH,
167. borderColor: 'transparent',
168. borderRadius: 3,
169. alignSelf: 'stretch',
170. },
171. statusBar: {
172. flexDirection: 'row',
173. alignItems: 'center',
174. paddingLeft: 5,
175. height: 22,
176. },
177. statusBarText: {
178. color: 'white',
179. fontSize: 13,
180. },
181. spinner: {
182. width: 20,
183. marginRight: 6,
184. },
185. });
186. exports.title = '<WebView>';
187. exports.description = 'Base component to display web content';
188. exports.examples = [
189. {
190. title: 'WebView',
191. render(): ReactElement { return <WebViewExample />; }
192. }
193. ];