이 글에서는 주로 React Native와 WebView 간의 통신을 위한 샘플 코드를 소개하고 있습니다. 편집자 입장에서는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집기를 따라 살펴보겠습니다
WebView는 ReactNative의 구성 요소로, 웹 페이지에 액세스하는 데 사용할 수 있는 기본 WebView를 생성할 수 있습니다.
때때로 RN과 WebView 또는 데이터 전송 간에 통신이 필요한 경우가 있습니다. , 또는 메시지 알림을 보내려면 다음 지식을 사용해야 합니다.
1: WebView는 RN 측으로 데이터를 보냅니다.
먼저 웹뷰를 구축합니다.
<WebView ref={'webview'} source={require('./index.html')} style={{width: 375, height: 220}} onMessage={(e) => { this.handleMessage(e) }} />
onMessage 메소드가 있다는 것을 알 수 있는데,
onMessage 함수
webview 내부의 웹페이지에서 window.postMessage 메소드를 호출하면 이 속성에 해당하는 함수가 구동되어, 웹페이지와 RN. 이 속성을 설정하면 postMessage 전역 함수가 webview에 삽입되고 이미 존재할 수 있는 동일한 이름의 구현을 덮어씁니다.
웹 페이지의 window.postMessage는 RN 측의 이벤트 객체, 즉 event.nativeEvent.data에 캡슐화된 하나의 매개변수 데이터만 전송합니다. 데이터는 문자열만 될 수 있습니다.
이 메서드는 Webview(즉, html)에서 데이터를 수신하는 데 사용되는 것을 볼 수 있습니다.
내부 구현은 수신된 데이터를 처리하는 것입니다.
handleMessage(e) { this.setState({webViewData: e.nativeEvent.data}); }
e.nativeEvent .data는
이 작업만으로는 Rn 측의 처리만으로는 충분하지 않습니다. 또한 html로 데이터를 보내는 방법도 작성해야 합니다.
var data = 0; function sendData(data) { if (window.originalPostMessage) { window.postMessage(data); } else { throw Error('postMessage接口还未注入'); } } document.getElementById('button').onclick = function () { data += 100; sendData(data); }
window.postMessage 는 RN으로 데이터를 보냅니다.
두 번째: RN이 Webview로 데이터를 보냅니다:
먼저 데이터를 보내는 방법을 정의합니다:
sendMessage() { this.refs.webview.postMessage(++this.data); }
이 단계는 매우 간단합니다.
원하는 데이터를 작성하기만 하면 됩니다. 매개변수로 보내기
그런 다음 html로 데이터를 수신하는 해당 방법이 있어야 합니다.
window.onload = function () { document.addEventListener('message', function (e) { document.getElementById('data').textContent = e.data; }); }
이것은 Rn과 Webview 간의 통신을 실현할 수 있습니다.
나중에 넣습니다. 소스 코드:
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <p style="text-align: center"> <button id="button">发送数据到react native</button> <p style="text-align: center">收到react native发送的数据: <span id="data"></span></p> </p> <script> var data = 0; function sendData(data) { if (window.originalPostMessage) { window.postMessage(data); } else { throw Error('postMessage接口还未注入'); } } window.onload = function () { document.addEventListener('message', function (e) { document.getElementById('data').textContent = e.data; }); document.getElementById('button').onclick = function () { data += 100; sendData(data); } } </script> </body> </html>
web.js:
/** * Created by 卓原 on 2017/8/17. * zhuoyuan93@gmail.com */ import React from 'react'; import { View, Text, StyleSheet, WebView } from 'react-native'; export default class Web extends React.Component { constructor(props) { super(props); this.state = { webViewData: '' } this.data = 0; } sendMessage() { this.refs.webview.postMessage(++this.data); } handleMessage(e) { this.setState({webViewData: e.nativeEvent.data}); } render() { return ( <View style={styles.container}> <View style={{width: 375, height: 220}}> <WebView ref={'webview'} source={require('./index.html')} style={{width: 375, height: 220}} onMessage={(e) => { this.handleMessage(e) }} /> </View> <Text>来自webview的数据 : {this.state.webViewData}</Text> <Text onPress={() => { this.sendMessage() }}>发送数据到WebView</Text> </View> ) } } const styles = StyleSheet.create({ container: { flex: 1, marginTop: 22, backgroundColor: '#F5FCFF', }, });
위 내용은 React Native와 WebView 간의 통신 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!