ReactNative (5) 리스트형 TIL 27 Image Source 변수로 할당 React Native에서 Image를 지정할때 이런식으로 작성을 하는데 require함수 내부에서는 자바스크립트 변수가 적용이 안된다. const myImageUrl = './myProfileImg.png' 위 코드처럼 리액트에서 사용하는 {}을 사용하면 계속해서 오류가 나온다. 그래서 해결책은 찾아보니 require('./myProfileImg.png')을 전체를 변수로 묶어버리면 해결이 가능하다. const item = { title: "Item 1", text: "Text 1", src: require("./event.jpeg"), }, 이런식으로 접근을 해서 할당을 해주면 가능하다 TIL 26 ReactNative BottomSheet 구현 쿠팡같은 커머스 어플을 사용하면 처음들어갔을때 밑에 창에 이벤트 모달같은게 뜨는걸 볼 수 있는데 리액트 네이티브에서는 BottomSheet을 통해서 구현이 가능하다. import BottomSheet from "reanimated-bottom-sheet" npm install react-native-reanimated@2.2.4 로 version 2.2.4로 설치해준다. 굳이 2.2.4로 설치하는 이유는 현재 최신버전인 2.3.1이 안드로이드쪽에서 트러블슈팅이 심각해서 이전버전을 설치하는게 정신건강에 좋다. 최신버전으로 설치해서 하루종일 고통받다가 결국 이전버전을 받는 나와 같은 경험을 안하는걸 추천한다. 속성들을 보면 initialSnap 초기 위치를 설정해주는데 보통 0 이나 1로 선택을 한다. 강조.. TIL 25 ReactNative RNPicker Android 위 사진을 보면 안드로이드에서 RNPicker을 적용한 모습인데 제대로 안된걸 볼 수 있다. 이 문제를 해결하기 위해서는 useNativeAndroidPickerStyle={false}와 style={{inputAndroid:{속성들}}}을 적용해줘야 해결이 된다. TIL 24 ReactNative RNPickerSelect 리액트 네이티브에서 목록창을 만들려면 RNPickerSelect을 사용해야 된다. View태그 안에다가 RNPicker을 넣어주면 스타일 줄 수 있다. 휴대폰 번호 밑 통신사가 들어가 있는 창이 RNPicker이다. placeholder은 label로 변경해주면 된다!! TIL 23 ReactNative Box shadow 주는법 1. Box Shadow 위 4개의 shadow속성들은 ios에 적용되는 속성들이고 elevation은 안드로이드에 적용되는 속성이다. 문제는 이렇게만 적용을 해주면 테두리에 그림자가 생기는게 아니라 안에 있는 내용들이 그림자가 생기면서 제대로 먹히질 않는다. 이를 해결하기위해서는 전체 컨테이너에다가 backgroundColor: "white"을 넣어주면 해결이된다!!! 이전 1 다음
