내부 webview에 값 전달하기

webview를 어플리케이션으로 감싸서 동작하게 하는 경우가 많다.

 

이 경우에 어플리케이션 외부의 동작 정보를 내부 웹뷰에 반영시켜야 할 때가 있다. 

 

예를 들면, 환경설정이라던지 혹은 웹뷰 내부에 정의한 함수의 실행이라던지..

 

어플리케이션 웹뷰 컴포넌트에서의 코드

import { Button, StyleSheet, Text, View } from "react-native";
import Constants from "expo-constants";
import WebView from "react-native-webview";
import { useRef, useState } from "react";

function WebViewScreen(){
	const [hasError, setHasError] = useState(null);
	const webViewRef = useRef<WebView>(null);
    const [message, setMessage] = useState<string>('Message From Application');
    
    const sendMessageToWebView = () => {
    	if(webViewRef.current){
        	webViewRef.current.injectJavaScript(
            	`window.receiveMessageFromRN('${message}');`
            );
        }
    };
    
	return(
    	<View style={styles.container}>
        	<View>
            	<Button
                	title='send Message To WebView'
                    onPress={sendMessageToWebView} />
            </View>
            <WebView
        		ref={webViewRef}
        		source={{ uri: "http://192.0.0.2:5173" }}
        		onError={() => setHasError(true)}
        		javaScriptEnabled={true} />
        </View>
    );
}

export default WebViewScreen;


const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
  },
});

 

 

그럼 리액트에서는 다음과 같이 이를 받는다.

import { useEffect, useState } from "react";

function ReactInnerView(){
	const [message, setMessage] = useState(null);

	useEffect(()=>{
    	window.receiveMessageFromRN = data => setMessage(data);
    },[]);

	return(
    	<div>
        	<main>
            	{message && (<p>{message}</p>)}
            </main>
        </div>
    );
}

export default ReactInnerView;