Question

假设我的这个View包含WebView上的WebView和Cart按钮

export default class App extends Component<{}> {
  constructor(props){
    super(props);
  }
  render() {
    return (
      <View style={styles.parent}>
          <WebView
            source={{uri: 'https://mywebsite.com'}} style={styles.fullScreen}
            injectedJavaScript={jsCode}
            javaScriptEnabledAndroid={true}
          />
          <View style={styles.floatView}>
            <Button
              title="Cart"
              onPress={toggleCart}
              color="black"
            />
          </View>
      </View>
    );
  }
}

当用户点击按钮时，我想执行此功能

const toggleCart = function() {
  let jsCode = "app.trigger('toggle:cart');";
  //execute javascript code on webView
}

在React-Native上可以做些什么吗？

由于

Answer 1

首先获取对您的webview的引用，然后执行以下操作：

this.webview.postMessage("Hello from RN");



//to get this data into webview

...
<script>
  document.addEventListener("message", function(data) {
    // call whatever function you need
  });
</script>
...

Answer 2

那个很好。您可以使用react-native-webview-bridge

模块，提供react natibe代码和webview之间的通信，因此你可以点击按钮发送消息。

    const injectScript = `
  (function () {
                    if (WebViewBridge) {

                      WebViewBridge.onMessage = function (message) {
                        if (message === "hello from react-native") {
                          WebViewBridge.send("got the message inside webview");
                        }
                      };

                      WebViewBridge.send("hello from webview");
                    }
                  }());
`;

var Sample2 = React.createClass({
  onBridgeMessage(message){
    const { webviewbridge } = this.refs;

    switch (message) {
      case "hello from webview":
        webviewbridge.sendToBridge("hello from react-native");
        break;
      case "got the message inside webview":
        console.log("we have got a message from webview! yeah");
        break;
    }
  },

  render() {
    return (
      <WebViewBridge
        ref="webviewbridge"
        onBridgeMessage={this.onBridgeMessage.bind(this)}
        injectedJavaScript={injectScript}
        source={{uri: "http://google.com"}}/>
    );
  }
});

以上示例清楚地解释了它，您可以使用它。

Answer 3

您可以简单地使用injectJavaScript方法。

提供您的WebView参考，然后单击按钮：

library(tidyverse)

cols = terrain.colors(3)

as.data.frame(t(volcano)) %>% 
  rownames_to_column(var="row") %>% 
  gather(col, value, -row) %>% 
  mutate(col=(as.numeric(gsub("V","",col)) - 1)/(nrow(volcano) - 1),
         row=(as.numeric(row) - 1)/(ncol(volcano) - 1)) %>% 
  ggplot(aes(col, row, z=value)) +
    geom_raster(aes(fill=value)) +
    geom_contour(colour="grey50", size=0.2) +
    geom_point(data=. %>% filter(value==max(value)), 
               colour="red", shape=16, size=2) +
    coord_fixed(ratio = ncol(volcano)/nrow(volcano), expand=FALSE) +
    scale_fill_gradient2(low=cols[1], mid=cols[2], high=cols[3],
                         midpoint=mean(volcano)) +
    theme_minimal()

单击React-Native上的按钮时如何在WebView上执行Javascript

3 个答案: