feat(taro-components-rn): 增加 WebView, close #2336

packages/taro-components-rn/App.js

@@ -24,6 +24,7 @@ import EXForm from './example/EXForm'
 import EXAudio from './example/EXAudio'
 import EXVideo from './example/EXVideo'
 import EXMap from './example/EXMap'
+import EXWebView from './example/EXWebView'
 
 export default class App extends Component {
   state = {
@@ -182,6 +183,9 @@ export default class App extends Component {
 
         <Text>Form</Text>
         <EXForm />
+
+        <Text>WebView</Text>
+        <EXWebView />
       </ScrollView>
     )
   }

packages/taro-components-rn/example/EXWebView.js

@@ -0,0 +1,10 @@
+import React, { Component } from 'react'
+import { WebView } from '../src'
+
+export default class EXSlider extends Component {
+  render () {
+    return (
+      <WebView src="https://taro.aotu.io/" style={{ width: 300, height: 150 }} />
+    )
+  }
+}

packages/taro-components-rn/src/components/WebView/index.js

@@ -0,0 +1,57 @@
+/**
+ * ✔ src
+ * ✔ onMessage(bindmessage)
+ * ✔ onLoad(bindload)
+ * ✔ onError(binderror)
+ *
+ * 注意：onMessage 每次调用都会执行（小程序在特定时机触发），RN WebView 调用 window.postMessage 只接收一个字符串参数
+ *
+ * @flow
+ */
+
+import * as React from 'react'
+import {
+  WebView,
+  StyleSheet,
+} from 'react-native'
+const utils = require('../../utils')
+
+type Props = {
+  style?: StyleSheet.Styles,
+  src?: boolean,
+  onMessage?: Function,
+  onLoad?: Function,
+  onError?: Function,
+}
+
+export default function _WebView ({
+  style,
+  src,
+  onMessage = utils.noop,
+  onLoad = utils.noop,
+  onError = utils.noop,
+}: Props) {
+  return (
+    <WebView
+      source={{ uri: src }}
+      onMessage={(event) => {
+        onMessage({
+          detail: {
+            data: [event.nativeEvent.data]
+          }
+        })
+      }}
+      onLoad={() => {
+        onLoad({
+          detail: { src }
+        })
+      }}
+      onError={() => {
+        onError({
+          detail: { src }
+        })
+      }}
+      style={style}
+    />
+  )
+}

packages/taro-components-rn/src/index.js

@@ -25,3 +25,4 @@ export { default as TabbarPanel } from './components/Tabbar/Panel'
 export { default as Audio } from './components/Audio'
 export { default as Video } from './components/Video'
 export { default as Map } from './components/Map'
+export { default as WebView } from './components/WebView'