WebViewについて②

React Nativeのボタンを押したというイベントを、WebView側に渡して、そこに書かれているJavaScriptのコードを実行する。

App.js

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, SafeAreaView, Button } from "react-native";
import { useRef } from "react";
import { WebView } from "react-native-webview";
import { SafeAreaProvider } from "react-native-safe-area-context";

const html = `
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./index.css" />
    <script>
      function pressInjectedJavaScript(){
        alert('ReactNativeから渡されたコードを実行しました!');
      }
    </script>
  </head>
  <body>
    <div class="title">Document</div>
  </body>
</html>`;

export default function App() {
  const webRef = useRef(null);

  const pressJavaScript = () => {
    webRef.current?.injectJavaScript("pressInjectedJavaScript()");
  };

  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1 }}>
        <WebView ref={webRef} source={{ html: html }} />
        <Button title="PUSH" onPress={pressJavaScript} />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

 

WebView側にボタンを置く方法もある。その場合、WebViewでのイベントを、React Nativeにわたし、そこで処理して、再度WebView側に渡す必要がある。

 

App.js

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, SafeAreaView, Button } from "react-native";
import { useRef } from "react";
import { WebView } from "react-native-webview";
import { SafeAreaProvider } from "react-native-safe-area-context";

const injectScript = `
  window.addEventListener("load", function () {
    document.getElementById("button").onclick = function () {
      alert("Hello");
    };
  });
`;

const html = `
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./index.css" />
  </head>
  <body>
    <div class="title">Document</div>
    <button id="button" onclick={pressInjectedJavaScript}>PUSH</button>
  </body>
</html>`;

export default function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1 }}>
        <WebView
          source={{ html: html }}
          injectedJavaScriptBeforeContentLoaded={injectScript}
        />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});