개발하자(DevHaja)

FrontEnd/React & React-Native

[React-Native] React-Native-Webview(웹뷰) 데이터 통신 Feat. PostMessage

📜 Webview PostMessage 회사에서 앱을 개발할 때 React-Native webview로 React 프로젝트를 씌워서 앱 등록을 하였다. 그때 RN -> React 또는 React -> RN 으로 데이터를 전달해야하는 일이 생긴다. (앱을 켰을 때 os확인을 하거나, 접속 위치를 확인해 react에서 사용할 경우 등) 그 당시 사용했던 방법을 기록해 놓으려고 한다. 🔍 React-Native Webview 옵션 세팅 React-Native webview 작업 시 onMessage 속성에 react에서 보내는 데이터를 받을 때 사용할 함수를 적는다. const webview = useRef(); { web_to_native(e) }} source={{ uri: uri, }} /> 🔍 Reac..

FrontEnd/React & React-Native

[React-Native] React-Native-Webview(웹뷰) 로 하이브리드 앱 만들기

현재 진행 중인 개발동아리에서 앱을 만들기로 하였다. 근데 우리는 앱개발자가 없는걸..? 그래서 react-native 를 이용해 웹뷰를 만들어 모바일 웹에 씌우기로 하였다. 이를 하이브리드앱이라고 한다. react-native-webview 를 개발하는 과정에서 엄청난 오류와 시간이 걸렸기 때문에 다음에 작업할 때 이를 방지하기 위해 기록하려고 한다. 처음에 expo를 사용하여 작업을 했지만 알 수 없는 오류들을 해결하는데 시간이 더 걸릴 것 같아서 다 지우고 react-native-cli 로 환경 설정을 진행했다. 나는 mac을 사용하고 있기 때문에 mac os 기준으로 작업하였다. 1. Homebrew 설치 Homebrew 는 mac용 패키지 관리자이다. 아래 명령어로 설치하면 된다. $ /bin/..

devwoodie
'WebView' 태그의 글 목록