본문 바로가기

React-Native8

[React-Native] react-navigation 사용하여 화면 간 이동하기 왜 react-navigation인가? react-native로 개발을 시작하는 데 있어서 가장 중요한 요소 중 하나는 화면 별 스택 구성과 화면 간 이동에 어떤 라이브러리를 쓸 것인가인 것 같습니다. react-navigation native-navigation react-native-navigation react-native-router-flux 더 많은 라이브러리들이 있겠지만 화면을 이동할 때 많이 쓰는 라이브러리는 이정도가 있는 것 같습니다. 그중에 저는 react-navigation을 사용하여 개발을 시작하였습니다. 그 이유는 성능개선에 관한 update가 다른 라이브러리보다 훨씬 좋다고 판단이 되었기 때문입니다. react-navigation는 공식홈페이지가 따로 존재하고 현재 버전 4.0.1.. 2019. 10. 15.
[React-Native] 리액트 네이티브(react-native) 구글 로그인 연동하기 앱에서 사용자들이 간편하게 로그인할 수 있는 sns 로그인 연동은 필수인 것 같습니다. 저도 안드로이드로는 구글 로그인 연동을 해봤었는데 이번에 프로젝트를 진행하면서 리액트 네이티브로는 처음 연동을 해보았습니다. 자료가 아직 많지 않은 것 같아 정리를 해보았습니다. ios앱 전용으로 테스트한 내용입니다. 1. Firebase 프로젝트 생성 구글 로그인인증을 위해서 우선 새로운 Firebase 프로젝트와 그 안에 새로운 앱을 만들어줍니다. 1) 기존 Firebase 프로젝트가 없는 경우 Firebase 콘솔로 이동하여 이름을 지정하고 새 프로젝트를 생성합니다. 2) 새 앱을 만들어 프로젝트에 연결합니다. 프로젝트 대시보드에서 ios 버튼을 눌러 앱을 추가해보겠습니다. 앱 등록을 위해 시키는 대로 bundl.. 2019. 10. 12.
[React-Native] React native 와 WebView 데이터 통신 에러 React Native에서 WebView로 띄우고 데이터를 주고받는 작업에서 다른페이지는 괜찮았는데 KMC인증페이지를 호출하는데 계속 이러한 에러가 발생했다. Setting onMessage on a WebView overrides existing values of window.postMessage, but a previous value was defined 특히 이놈이 안드로이드는 문제가 없는데 IOS에서만 계속 에러가났다.. 알아보니 문제는 iOS에서 window.postMessage 호출을 연속적으로 수행 하면 마지막 호출이 성공할 때까지 메시지가 전달되기 전에 URL이 무시 될 때마다 첫 번째 호출이 손실 된다는 것 이 문제에 대해 수정은 여전히 진행되고 있는 중인것 같다. 일단 찾아서 해결한 방.. 2019. 6. 20.
[React-Native] React native 와 WebView 데이터 통신 React native 와 webView 데이터 통신 회사에서 react natve에서 webview를 띄워주고 webview안에서 액션이 있을경우 react native로 return값을 줘야하는 작업이 있었다. 그래서 어떤 식으로 메시지를 주고받을 수 있는지 알아보게 되었다. 기본적으로 에서 사용할 수 있는 API는 3가지가 있다. 1. injectedJavaScript WebView안에서 실행할 JavaScript 코드를 삽입할 수 있다. console.log(navEvent.jsEvaluationValue)} /> 2. injectJavaScript 반환 값 없이 WebView에서 즉시 실행되는 JavaScript 코드를 삽입할 수 있다. 3. onMessage/postMessage 실제적인 양방.. 2019. 6. 19.