如何通过单击反应本机按钮将数据发送到 webview

Question

我使用了 componentDidMount 方法，该方法将数据正确发送到 webview，但是当我单击特定的 react native 按钮时，我想发送数据 webview。

在此 webview 中显示本地 html 页面，在此我将数据发送到 webview 和 html 页面中的加载事件警报在这个 componentdidmount 方法中由 react native 发送的数据成功地将数据发送到 webview html 页面但是当我'在方法中尝试相同的代码，它说this.input是未定义的。

   export default class HtmlRender extends Component {

   //error:this.input is undefined
   sendData() {
         this.input.postMessage( data )
   }

// This Is working
 componentDidMount(){
         this.input.postMessage( data)
   }


 render(){
      return (
          <View style={styles.fullContainer}>
               <View style={styles.webviewBorder}  >

                  <WebView
                    ref={(input) => this.input = input}
                    source={{uri:'file:///android_asset/Page.html'}}
                   />
               </View>
           <View  >
                <Button  onPress={this.sendData}>
                   <Text>
                      Data
                   </Text>
               </Button>
            </View>
  </View  >

)}

Answer 1

我使用了componentDidMount方法，该方法可以将数据正确发送到webview，但是当我单击特定的react native按钮时，我想发送数据webview。

在此webview中显示本地html页面，在此中，我将数据发送到webview，并且在html页面中发生加载事件时，此componentdidmount方法中的react native发送的数据已成功将数据发送到webview html页面，但是当我正在尝试说this.input未定义的方法中的相同代码。

   export default class HtmlRender extends Component {

   //error:this.input is undefined
   sendData() {
         this.input.postMessage( data )
   }

// This Is working
 componentDidMount(){
         this.input.postMessage( data)
   }


 render(){
      return (
          <View style={styles.fullContainer}>
               <View style={styles.webviewBorder}  >

                  <WebView
                    ref={(input) => this.input = input}
                    source={{uri:'file:///android_asset/Page.html'}}
                   />
               </View>
           <View  >
                <Button  onPress={this.sendData}>
                   <Text>
                      Data
                   </Text>
               </Button>
            </View>
  </View  >

)}

Answer 2

我使用了componentDidMount方法，该方法可以将数据正确发送到webview，但是当我单击特定的react native按钮时，我想发送数据webview。

在此webview中显示本地html页面，在此中，我将数据发送到webview，并且在html页面中发生加载事件时，此componentdidmount方法中的react native发送的数据已成功将数据发送到webview html页面，但是当我正在尝试说this.input未定义的方法中的相同代码。

   export default class HtmlRender extends Component {

   //error:this.input is undefined
   sendData() {
         this.input.postMessage( data )
   }

// This Is working
 componentDidMount(){
         this.input.postMessage( data)
   }


 render(){
      return (
          <View style={styles.fullContainer}>
               <View style={styles.webviewBorder}  >

                  <WebView
                    ref={(input) => this.input = input}
                    source={{uri:'file:///android_asset/Page.html'}}
                   />
               </View>
           <View  >
                <Button  onPress={this.sendData}>
                   <Text>
                      Data
                   </Text>
               </Button>
            </View>
  </View  >

)}

Answer 3

我使用了componentDidMount方法，该方法可以将数据正确发送到webview，但是当我单击特定的react native按钮时，我想发送数据webview。

在此webview中显示本地html页面，在此中，我将数据发送到webview，并且在html页面中发生加载事件时，此componentdidmount方法中的react native发送的数据已成功将数据发送到webview html页面，但是当我正在尝试说this.input未定义的方法中的相同代码。

   export default class HtmlRender extends Component {

   //error:this.input is undefined
   sendData() {
         this.input.postMessage( data )
   }

// This Is working
 componentDidMount(){
         this.input.postMessage( data)
   }


 render(){
      return (
          <View style={styles.fullContainer}>
               <View style={styles.webviewBorder}  >

                  <WebView
                    ref={(input) => this.input = input}
                    source={{uri:'file:///android_asset/Page.html'}}
                   />
               </View>
           <View  >
                <Button  onPress={this.sendData}>
                   <Text>
                      Data
                   </Text>
               </Button>
            </View>
  </View  >

)}

Answer 4

我使用了componentDidMount方法，该方法可以将数据正确发送到webview，但是当我单击特定的react native按钮时，我想发送数据webview。

在此webview中显示本地html页面，在此中，我将数据发送到webview，并且在html页面中发生加载事件时，此componentdidmount方法中的react native发送的数据已成功将数据发送到webview html页面，但是当我正在尝试说this.input未定义的方法中的相同代码。

   export default class HtmlRender extends Component {

   //error:this.input is undefined
   sendData() {
         this.input.postMessage( data )
   }

// This Is working
 componentDidMount(){
         this.input.postMessage( data)
   }


 render(){
      return (
          <View style={styles.fullContainer}>
               <View style={styles.webviewBorder}  >

                  <WebView
                    ref={(input) => this.input = input}
                    source={{uri:'file:///android_asset/Page.html'}}
                   />
               </View>
           <View  >
                <Button  onPress={this.sendData}>
                   <Text>
                      Data
                   </Text>
               </Button>
            </View>
  </View  >

)}

Answer 5

将数据从 React Native 发送到 Webview

反应本机代码

constructor (props) { 
 super(props);
 this.state = {  }  
 this.webView = React.createRef();
}

sendDataToWebView = (dataObject) => {
  
 this.webView.injectJavaScript(`( function() { 
   document.dispatchEvent( new MessageEvent('message', { 
   data: ${JSON.stringify(dataObject)}, 
   origin : 'react-native' 
  })); })();` );
   
}

render() {
 return(
  <WebView
   source={{ ... }}
   containerStyle={{ ... }}
   ref={(webView) => this.webView = webView}
  />)
}

网页浏览代码

if(window.ReactNativeWebView) {
  window.addEventListener("message", this.webViewEventHandler); //android 
  document.addEventListener("message", this.webViewEventHandler); //ios
} 

webViewEventHandler = (event) => {
 if (event.origin == 'react-native'){
  console.log(event.data) //get dataObject
 }  
}