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>
<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>
<WebView ref={webRef} source={{ html: html }} />
<Button title="PUSH" onPress={pressJavaScript} />
</SafeAreaView>
</SafeAreaProvider>
);
}
const styles = StyleSheet.create({
container: {
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>
</head>
<body>
<div class="title">Document</div>
<button id="button" onclick={pressInjectedJavaScript}>PUSH</button>
</body>
</html>`;
export default function App() {
return (
<SafeAreaProvider>
<WebView
source={{ html: html }}
injectedJavaScriptBeforeContentLoaded={injectScript}
/>
</SafeAreaView>
</SafeAreaProvider>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});