React Native和webview通信，如何从RN调用React函数

Question

我有RN<=>运行的Webview

• webview订阅"getFoo"消息
• webview将foo值设置为"woo"(通过断点，我可以确认foo值已更新(
• RN向webview发送"getFoo"消息：给我foo的值
• webview通过回调得到RN请求的通知，这里foo值为空！为什么
• webview将foo值(空(发送到RN

下面是网络视图部分

import _ from "lodash"
import React, {
useState,
useContext,
useEffect,
useReducer,
useCallback,
useRef
} from "react"
const EventEmitter = {
_events: {},
dispatch: function(event, data) {
if (!this._events[event]) return
this._events[event].forEach(callback => callback(data))
},
subscribe: function(event, callback) {
if (!this._events[event]) this._events[event] = []
this._events[event].push(callback)
}
}
window.EventEmitter = EventEmitter
// webview
const WebviewApp = props => {
// https://codesandbox.io/s/lively-breeze-l9z82
const [foo, setFoo] = useState('')
useEffect(() => {

EventEmitter.subscribe("getFoo", event => {
sendFoo()
// here foo is empty! 
})
}, [])
const sendFoo = () => {
window.ReactNativeWebView.postMessage(foo)
}
const handleClick = () => {
setFoo("woo")
}
return (
<div className="App">
<button onClick={handleClick} />
</div>
)
}

以下是RN部分

import {WebView} from 'react-native-webview'
const RNApp = props => {
const webEl = useRef(null)
getFooFromWebview = () => {
const run = `
window.EventEmitter.dispatch('getFoo', {});
`
webEl.current.injectJavaScript(run)
}

const uri = "server url which hosts the webview code"
return (
<View style={{flex: 1}}>
<TouchableOpacity onPress={getFooFromWebview}>
<Text>click</Text>
</TouchableOpacity>
<WebView
ref={webEl}
javaScriptEnabledAndroid
source={{uri}}
onMessage={(event) => {
console.log(event)
}}
data={props.data}
/>
</View>
)
}

Answer 1

useEffect不会更新，因为您正在传递一个空数组。只需通过状态foo，然后您将获得更新：

useEffect(() => {
EventEmitter.subscribe("getFoo", event => {
sendFoo()
})
}, ['foo']) // re-run useEffect on 'foo' state change