Question

我正在使用React原生Webview加载我的网络应用。我正在使用window.postMessage从我的网络应用发布消息，并且我已经实现了onMessage回调

render(){
   return <View>
     <Text>{this.state.messageFromWebview}</Text>
     <WebView onMessage={this.onWebViewMessage} source={{uri: webAppUri}} />
   </View>;
}

在onWebViewMessage函数中，执行

onWebViewMessage=(event)=>{
   this.setState({
    messageFromWebview: event.nativeEvent.data
   })
}

上面的代码进入无限循环。设置状态时，Webview重新渲染并调用触发setState的post消息。

有没有其他选择，或者我在这里遗漏了什么。是否可以在不重新渲染Webview的情况下将<Text/>设置为来自webview的消息。

Answer 1

我认为无限循环是因为在没有const请求的情况下调用事件。您需要做的就是在setState之前添加const变量。以下代码适用于我。

onWebViewMessage = (event) => {    
  // set const data
  const WishData = event.nativeEvent.data;
  // then excuting setState the constant data here
  this.setState({ 
    messageFromWebview: WishData 
  });
}

onMessage回调设置状态时重新加载Webview

1 个答案: