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

Question

假设我有一个包含 WebView 和 WebView 上的购物车按钮的视图

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

首先获取对您的网络视图的引用，然后执行以下操作：

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



//to get this data into webview

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