こちらに書いてあるまんまなんだけど。 https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native React Native側 onMessage={(event) => { alert(event.nativeEvent.data); }} Webview側 // @ts-ignore window.ReactNativeWebView.postMessage({ status: 'completed' }) windowにReactNativeWebViewというのが生えるのでそれを使って通信するとハンドリングできる。iframeみたい。
refを使って、onReloadといった任意のイベントハンドラでcurrent!.reload()させると手動でリロードが出来ます。 普通はpullToRefreshEnabledを使えば対応できると思いますが、こういう方法もあるということで。 import { View } from "../components/Themed"; import { WebView } from "react-native-webview"; import { Fab, Icon } from "native-base"; import { AntDesign } from "@expo/vector-icons"; export default function WebviewScreen() { const webview = useRef<WebView>(null) const onReload = () => { webview.current!.reload() } return ( <View style={styles.container}> <WebView ref={webview} pullToRefreshEnabled={true} source={{ uri: "https://expo.dev", }} /> <Fab right={30} bottom={60} icon={ <Icon color={"white"} as={<AntDesign name={"heart"}/>} /> } onTouchEnd={onReload} /> </View> ); }