[Expo] 키보드 높이값 웹뷰로 전송하기

Question

useKeyboard.tsconst useKeyboard = () => { const [keyboardHeight, setKeyboardHeight] = useState(0); useEffect(() => { function onKeyboardDidShow(e: KeyboardEvent) { // Remove type here if not using TypeScript setKeyboardHeight(e.endCoordinates.height); } function onKeyboardDidHide() { setKeyboardHeight(0); } const showSubscription = Keyboard.addListener( "keyboardDidShow", onKeyboardDidShow ); const hideSubscription = Keyboard.addListener( "keyboardDidHide", onKeyboardDidHide ); return () => { showSubscription.remove(); hideSubscription.remove(); }; }, []); return keyboardHeight; }; export default useKeyboard;WebViewScreen.tsxconst deviceHeight = Dimensions.get("window").height; const deviceWidth = Dimensions.get("window").width; const WebViewScreen = () => { // Logic const webviewURL = process.env.EXPO_PUBLIC_WEB_URL; const navigation = useNavigation>(); const [navState, setNavState] = useState(); const webviewRef = useRef(null); const keyboardHeight = useKeyboard(); const onMessage = async (event: WebViewMessageEvent) => { try { const message = JSON.parse(event.nativeEvent.data); console.log(message); switch (message.action) { case "getAlbum": let limit = 1; switch (message.type) { case "Blog": limit = 10; break; case "Q&A": limit = 5; break; case "Profile": default: limit = 1; } navigation.navigate("Album", { limit, webviewRef }); break; case "getKeyboardHeight": if (keyboardHeight > 0) { webviewRef.current?.postMessage( JSON.stringify({ action: "keyboardHeightData", height: keyboardHeight, }) ); } else { console.log("키보드 높이값: ", keyboardHeight); } break; default: break; } } catch (error) { console.error("onMessage Error:", error); } }; useEffect(() => { const cangoBack = navState?.canGoBack; const onPress = () => { if (cangoBack) { webviewRef.current?.goBack(); return true; } else { return false; } }; navigation.setOptions({ headerLeft: () => cangoBack ? : null, }); BackHandler.addEventListener("hardwareBackPress", onPress); return () => { BackHandler.removeEventListener("hardwareBackPress", onPress); }; }, [navState?.canGoBack]); // View return ( { webviewRef.current?.reload(); }} /> ); }; const styles = StyleSheet.create({ webview: { flex: 1, width: deviceWidth, height: deviceHeight, }, }); export default WebViewScreen;웹뷰 내 Input 컴포넌트에 focus가 되면 웹뷰에서 getKeyboardHeight 라는 메세지를 보내게 되고, 앱에서 이 메세지를 받을 경우 키보드가 open 되어 키보드 높이 값을 구한 뒤, 웹뷰로 키보드 높이 값을 보내려고 하고 있습니다.useKeyboard 훅을 사용하여 키보드 높이 값을 구현하고 있는데, 훅 내에서 키보드 상태가 open/hide 일 때는 키보드 높이 값이 정상적으로 변하는게 확인했는데, WebViewScreen 컴포넌트에서 해당 훅에서 리턴해주는 값을 keyboardHeight 라는 변수에 저장하여 웹뷰로 전송하려고 하는데, 키보드 상태가 open이 되어도 높이값이 0이 떠서 else 조건문이 실행되어 console.log("키보드 높이값: ", keyboardHeight); 로그가 실행되고 있습니다. 추측하기론, '비동기 상태 업데이트의 타이밍 문제' 로 인하여 발생하는 문제라고 생각 되는데, 비동기 처리로 리턴된 값을 어떻게 처리 가능한지 잘 모르겠어서 질문합니다.

Jamie Hong · Answer

useEffect

크롱크롬 · Answer

딜레이를 주고 포스트메세지 보내는 건 어떨까요?useEffect(() => { if (keyboardHeight > 0 && keyboardOpen) { setTimeout(() => { webviewRef.current?.postMessage( JSON.stringify({ type: 'keyboardHeight', value: keyboardHeight }) ); }, 100); // 또는 200ms로 조정 }}, [keyboardHeight, keyboardOpen]);

[Expo] 키보드 높이값 웹뷰로 전송하기

2개의 답변

Q&A 목록