Comment puis-je envoyer des données à WebView en cliquant sur le bouton natif de réaction

J'ai utilisé la méthode componentDidMount qui envoie correctement les données à WebView, mais je souhaite envoyer des données WebView lorsque je clique sur un bouton natif particulier.

Dans cette vue Web, la page html locale est affichée et dans celle-ci, j'envoie les données à la vue Web et lors de l'événement de chargement dans la page html, les données envoyées par réagir natif dans cette méthode componentdidmount envoient avec succès des données à la page html de la vue Web, mais quand je j'essaie le même code dans la méthode qui dit que this.input n'est pas défini.

   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  >

)}

Répondre

vous pouvez le faire avec injectéJavaScript. définissez simplement la source de votre page html dans const

const htmlData = require('./page.html');

et créez une méthode comme ci-dessous

injectedToHtml() {
    const myData = {planet: 'earth', galaxy: 'milkyway'};
    let injectedData = `document.getElementById('container').value = '${myData.planet+myData.galaxy}';`;
    return injectedData;
   }

et retournez votre vue Web comme ceci dans votre composant

<WebView
    source={htmlData}
    javaScriptEnabled={true}
    injectedJavaScript={injectedToHtml()}
    style={{flex: 1}}
/>

c'est ça! faites-moi savoir si vous avez encore des questions.

votre fichier html ressemble à ceci..

<!DOCTYPE html>
<html>
    <head>
      <style>
          #container {
              width:100%;
              height:100vh;
              display: flex;
              align-items:center;
              justify-content: center;
          }
      </style>
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>