모바일 앱/React Native25 [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. [React Native] iOS TextInput autoScroll, autoFocus 되지 않는 이슈 (+TextInput이 키보드에 가려지는 이슈) ... 위 내용은 제가 작업하고 있는 모바일 텍스트 에디터의 모습을 간단히 나타낸 것입니다. ScrollView 안에 TextInput과 Image 태그를 혼합하여 사용 중입니다. 일부 모습을 보여드리면 아래와 같습니다. 작업하던 중, ios에서 textInput에 autoFocus와 autoScroll이 되지 않는 이슈가 있었습니다. 자동 스크롤이 되지 않아 multiline으로 작성하던 내용이 키보드에 가려 나타나지 않는 이슈도 있었습니다. 저는 이 이슈를 TextInput 속성에 scrollEnabled={false}를 추가하여 해결했습니다. 참고 https://github.com/facebook/react-native/issues/16826 KeyboardAvoidingView has no eff.. 2021. 7. 13. [React Native] iOS project.pbxproj conflict 방지 최근 작업을 하다가 ios 폴더의 project.pbxproj에서 conflict가 계속 발생하는 현상을 발견했습니다. ios 폴더에 파일을 설정하고 하다 보니 다른 분의 project.pbxproj와 다른 부분이 생겨 git pull 명령어를 실행 시 conflict가 계속 발생하였습니다. 처음에 .gitignore에 project.pbxproj를 선언해주려 했으나 project.pbxproj는 .gitignore에 선언할 수 없다고 하더군요. 결국 찾은 해결 방법이 .gitattributes에 아래 문장을 추가해주는 것이었습니다. *.pbxproj binary merge=union 찾아보니 해당 파일을 binary처럼 인식하도록 설정하는 건데 이렇게 되면 project.pbxproj에 변경사항이 생겨.. 2021. 7. 13. 이전 1 2 3 4 5 6 7 다음
