文章/答案/技术大牛

发布

社区首页 >问答首页 >如何调用注入到WebView of ReactNative中的ReactNative代码？

问如何调用注入到WebView of ReactNative中的ReactNative代码？
EN

Stack Overflow用户

提问于 2019-08-05 14:14:43

回答 2查看 4.8K关注 0票数 0

我将一段JS代码注入了React原生的WebView中。我想在我的网页上调用这个js代码(使用React)，就像在程序中使用API一样，但我失败了。

这是我目前的代码：

const WebAPICode = `
function test() {
  alert('Hello');
}
`;

export default class PluginView extends Component {

  render() {
    return (
      <View {...this.props}>
        <WebView
          ref={webView=> this.webView = webView}
          originWhitelist={['*']}
          source={{ uri: "http://10.0.2.2:3000/" }}
          onLoadEnd={()=>this.webView.injectJavaScript(WebAPICode)}
        />
        <Text>{WebAPICode}</Text>
      </View>
    );
  }
}

我想在React中调用它，但这显然是错误的。在查看了大量信息之后，我仍然不知道如何实现它。

function App() {
  return (
    <span onClick={()=>test()}>test</span>
  );
}

就像setTimeout函数一样，js标准中没有这样的函数，但是浏览器将它添加到窗口对象window.setTimeout中，我还想将自己定义的函数添加到webview中，就像测试一样。

将测试函数注入到此webview中，而不是将其写入脚本标记中。

<html lang="en">
<head>
  <script>
    // The function is defined here, but I want this 
    // definition to be injected into the browser 
    function test() {
      alert('hello');
    }
    /**
     * This is what I want:
     * <WebView injectedJavaScript={`function test() {
     *                                 alert('hello');
     *                               }`}/>
     * Inject the test function into this webview instead
     * of writing it in the script tag.
     */
  </script>
</head>
<body>
  <script>
    test();
  </script>
</body>
</html>

javascript

reactjs

react-native

webview

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-08-05 14:22:50

看看webview，看看如何使用它。编写模块时，一定要参考官方文件。

你可以用这个

const WebAPICode = `alert('Hello')`;
...
      <WebView
          ref={webView=> this.webView = webView}
          originWhitelist={['*']}
          source={{ uri: "http://10.0.2.2:3000/" }}
          javaScriptEnabled={true}
          injectedJavaScript={WebAPICode}
        />

如果你在网上有这个功能，你可以叫它。

<html>
<head>
    <script language="javascript">
    function test()
    {
         alert('Hello');
    }
   </script>
</head>
<body>
...

const WebAPICode = `test()`;
...
      <WebView
          ref={webView=> this.webView = webView}
          originWhitelist={['*']}
          source={{ uri: "http://10.0.2.2:3000/" }}
          javaScriptEnabled={true}
          injectedJavaScript={WebAPICode}
        />

要执行注释中显示的数据，您必须这样做。

您的网页可以这样做。

var data = {name: "getname"}
window.ReactNativeWebView.postMessage(data);

  handleMessage(e) {
    //여러 데이터가 리스트 형식으로 올때
    let parsedata = JSON.parse(e.nativeEvent.data);
    message = parsedata.name
    if(message == "get name") {
       const data = { name: "John"  }
    this.webview.postMessage(JSON.stringify(data));
    } 
  }
<WebView
 ref={webview => (this.webview = webview)}
 onMessage={mssage => this.handleMessage(mssage)}
}

接收网页

document.addEventListener("message", function(event) {
    console.log("Received post message", event);

    test(event.data);
}, false);

票数 3

Stack Overflow用户

发布于 2019-08-05 14:28:43

您可以从webview调用postMessage，并像这样设置webview onMessage道具。

onMessage={event => { console.log(event) } }

在您的webview html中：

window.ReactNativeWebView.postMessage("Your Message");

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57360438

复制

相似问题

问如何调用注入到WebView of ReactNative中的ReactNative代码？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何调用注入到WebView of ReactNative中的ReactNative代码？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何调用注入到WebView of ReactNative中的ReactNative代码？
EN