React-Nativeを使用して、ボタンをクリックした際にWebView内でJavaScriptを実行する方法をご紹介します。以下はサンプルコードです。

# コンポーネントの定義
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');";
  // WebView内でJavaScriptコードを実行する
}

# WebViewとReact-Nativeの通信
// React-NativeからWebViewへメッセージを送信する
this.webview.postMessage("Hello from RN");

// WebView内でメッセージを受信する
...
<script>
  document.addEventListener("message", function(data) {
    // 適切な関数を呼び出すなどの処理
  });
</script>
...

# react-native-webview-bridgeの利用
// WebViewとReact-Native間の通信を提供するモジュール
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("WebViewからメッセージを受信しました！");
        break;
    }
  },

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


上記のサンプルコードは、React-Nativeのボタンクリック時にWebView内でJavaScriptを実行し、またWebViewとReact-Native間での通信を実現する方法を示しています。react-native-webview-bridgeモジュールを使用することで、簡単にコミュニケーションを確立できます。