본문 바로가기

react native28

[React Native] __DEV__ __DEV__는 React Native Development mode일 떄는 true를 반환하고, 아닐 떄에는 false는 반환하는 전역변수로 기본적으로 설정되어 있습니다. Development mode는 안드로이드 에뮬레이터, ios 시뮬레이터 등 혹은 usb를 이용해 실제 폰으로 연결해 앱을 실행하는 경우 등이 해당되고 그렇지 않은 경우는 apk를 추출하는 경우 등이 포함됩니다. 아래와 같이 사용할 수 있습니다. ... 위 코드는 StackNavigator의 최초 실행 화면을 __DEV__를 통해서 결정하는 코드입니다. Development Mode인 경우는 TempPage라는 임시 페이지를 반환하고, 그렇지 않은 경우는 MainStackNavigator를 호출합니다. 2021. 8. 12.
[React Native] React Native modal 배경 클릭해서 Modal 닫기 react native에서 modal을 띄워놓았을 때 모달 이외의 배경을 클릭해서 modal 창을 닫고 싶으신 상황이 있으실 겁니다. 이런 상황을 저는 다음과 같이 해결했습니다. setIsVisible(false)} transparent={true} > setIsVisible(false)} /> {/* 여기에 띄우고 싶으신 창 코드를 입력하시면 됩니다. */} 이 때 창 코드를 입력하는 부분에 position:absolute 속성을 줘야 합니다. Pressable 태그가 배경을 담당하는 부분인데 Pressable이 전체 화면을 덮도록 하기 위함입니다. 아래는 스택오버플러우 질문에 제가 답변을 단 부분입니다. https://stackoverflow.com/a/68570195/15458307 Close re.. 2021. 7. 29.
[React Native] WebView <img> click event 처리 react-native-webview 모듈을 이용해 html 소스를 앱에서 표시해주는 페이지를 개발하던 중, 이미지 클릭 시 이미지가 확대되도록 기능 구현을 해달라는 요청이 들어와 작업을 시작하였습니다. { console.log('onMessage Result, ', event.nativeEvent, typeof event.nativeEvent.data) if(checkImageUri(event.nativeEvent.data)){ setPressedImageUri(event.nativeEvent.data); } }} ... /> const changeHtmlTag = (text) => { let newText = text.replace(/{ return typeof uri==='string' && uri.. 2021. 7. 26.
[React Native] WebView 강제 종료되는 버그 react-native-webview에서 앱이 강제 종료되는 버그가 있습니다. 위와 같은 형식으로 WebView를 사용했는데, 페이지가 마운트 혹은 언마운트될 때 앱이 강제종료되는 버그가 있어 문제 해결에 참 애를 먹었습니다. 해결책으로는 두 가지 방법을 찾았습니다. 1. androidHardwareAccelerationDisabled 첫 번째는 androidHardwareAccelerationDisabled 속성을 true로 설정해주는 것입니다. 하지만 이 방법은 넘겨주는 html이 길어지면 화면에 렌더링되지 않는 등 성능 상으로 좋지 않아 대안을 찾아보았습니다. 2. opacity:0.99, minHeight:1 두 번째 방법은 style 속성에 opacity:0.99, minHeight:1를 추가해.. 2021. 7. 22.