REACT NATIVE (5) 썸네일형 리스트형 TextInput을 사용할 때 Keyboard를 항상 유지하는 방법. TextInput이 ScrollView나 FlatList안에 있는 경우TextInput 밖을 탭하면 키보드가 사라집니다. 하지만, 이 동작을 원하지 않을 때가 있겠죠? 이런 경우를 위해 keyboardShoudPersistTabs란 속성이 있습니다. https://reactnative.dev/docs/scrollview#keyboardshouldpersisttaps ScrollView · React NativeComponent that wraps platform ScrollView while providing integration with touch locking "responder" system.reactnative.dev 설정가능 한 값은 never, aleays, handled 3가지가 있습니.. react native에서 고정 폭을 가진 폰트를 사용하고 싶을 때! react native로 콘솔 프로그램을 만들고 있는데문자열 정렬이 문제다. 보통 컴포넌트의 폰트는 변동폭이므로탭 등 화이트 스페이스가 포함된 문자열을 출력하면정렬이 안 맞는다. 웹 에서는 textarea나 pre 태그를 사용하거나Consolas, monospace 같이고정폭을 가진 폰트를 사용해서 해결하곤 했다. 하지만, react native에는 이런게 없구나~ 검색해보니 다양한 방법이 있는것 같지만간단하게 다음과 같이 처리하고 넘어가보자. fontFamily: 'Courier New', 폰트가 예쁘지는 않지만최소한의 처리로 원하는 결과를 얻고 일단 넘어가보자. 내가 지금 만들고 있는 것은 콘솔이잖아. 콘솔!원래 콘솔에서 보이는 폰트는 다 그냥 그래~ ^^;; npx react-native init 명령 실패할 때 오랜만에 react native 프로젝트를 하나 만드는데 "지정된 경로를 찾을 수 없습니다" 에러가 발생!!!??? npx react-native init SampleProject 그동안 업데이트된 게 있나? 명령어가 틀렸나? 한참 구글에서 이것저것 찾아보다 예전 개발 기록에서 해답을 찾았다. npx --ignore-existing react-native init SampleProject --ignore-existing 옵션을 사용하니 잘 되네. 언제나 그렇듯 이유는 잘 모르겠네~ 참고로 윈도10에서 개발 중입니다. FlatList 목록이 표시가 잘 안 될 때. React Native로 목록 만들 때 유용하게 사용할 수 있는 FlatList라는게 새로? 생겼나 보다. https://reactnative.dev/docs/flatlist FlatList · React Native A performant interface for rendering basic, flat lists, supporting the most handy features: reactnative.dev 이전에는 ScrollView로 작업했는데 편리한 컴포넌트가 새로? 생겼길래 사용해봤다. 결론은 엄청난 고생을..... 해답은 renderItem 속성에 무명함수를 쓰지 말자!!! 증상은 처음에 DB에서 데이터를 가져와서 화면에 표시한 후 DB에 변경이 생기면 화면을 업데이트했는데 목록이 표시가 됐다 .. 리스트 목록을 스와이프 해봅시다! (swipeable row) React Native로 모바일 앱 만들기 공부하고 있는데요. Gmail 같은 앱에서 많이 사용하는 기능으로 스와이프 하면 버튼이 나타나는 것을 구현해 보았습니다. 아래와 같은 동작입니다. React Native Gesture Handler의 Swipeable 컴포넌트를 사용해서 쉽게 구현할 수 있었습니다. 제공되는 예제(데모) 코드를 참고해서 최소한 기능만 구현해 보았습니다. 제 코드와 데모는 여기로(expo demo). class SampleSwipe extends Component { renderRightActions = progress => { const pressAction = () => { this.close(); alert("TEST"); } return ( TEST ); } updateRe.. 이전 1 다음
