如何通过单击react native按钮将数据发送到webview

Question

我使用了componentDidMount方法，它正确地将数据发送到webview，但是当我点击特定的反应原生按钮时，我想发送数据webview。

在这个webview中显示本地html页面，在这里我将数据发送到webview，并在html页面中的load事件警报中，通过这个componentdidmount方法中的本机发送的数据成功地将数据发送到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

你可以用injectJavaScript来做。只需在const中定义你的html页面源代码

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

并创建一个如下方法

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

并在您的组件中返回这样的Web视图

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

而已！如果您还有任何疑问，请与我联系。

你的HTML文件看起来像这样..

<!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>

如何通过单击react native按钮将数据发送到webview

问题描述投票：0回答：1

1个回答

最新问题

如何通过单击react native按钮将数据发送到webview

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1