공부일지/React Native5 [RN] nativewind 적용.. expo cli로 하면서 스타일은 tailwind를 적용해보기로 했다.짜잔 nativewind를 사용하면 됩니다.그렇게 nativewind 공식 문서에 들어가니깐 친절하게 적용방법이 나와있다.https://www.nativewind.dev/quick-starts/expo Expo | NativeWindA example of an Expo project can be found on Githubwww.nativewind.devnpm install nativewindnpm install --save-dev tailwindcss@3.3.2그리고 npx tailwindcss init을 해주면 tailwind.config.js와 babel.config.js가 설치된다.// tailwind.config.jsmodul.. 2024. 5. 22. [RN] expo cli? react-native cli? expo cli장점 : 1. 빠른 시작 : 별도의 네이티브 설정 없이 바로 프로젝트를 생성하고 실행 할 수 있다.2. 빌드 및 배포 : expo의 관리형 워크플로우를 통해서 간단하게 어플리케이션을 빌드하고 배포 할 수 있다.(실제 기기에서 테스트 쉬움)3. 풍부한 라이브러리 : expo sdk를 통해 카메라, 위치, 센서, 지도 등 다양한 네이티브 기능을 간편하게 사용 할 수 있다.단점 :1. 제한된 네이티브 코드 : expo 관리형 워크플로우에서는 네이티브 코드를 직접 작성할 수 없으며, 지원되지 않는 네이티브 모듈이 있을 수 도 있다. 개발 빌드를 통해 네이티브 코드를 통합할 수 있으나 일반적으로 제한된다. react native cli장점 :1. 네이티브 코드 접근 : 네이티브 모듈 및 API를 직.. 2024. 5. 20. [React Native] ScrollView와 FlatList ScrollView는 데이터가 화면을 벗어났을 때 스크롤을 생성해서 스와이프를 통해서 벗어난 부분을 볼 수 있다. (데이터량이 많지않고 고정적일 때 사용) FlatList는 한번에 모든 데이터가 아닌 화면에 보여지는 부분만을 렌더링 (성능 향상!) windowing이랑 비슷한거 같은데. 2024. 3. 19. [React Native] Layout system RN에서는 Flexbox를 사용한다. 주의 Flexbox는 웹의 CSS에서와 같은 방식으로 리액트 네이티브에서 몇 가지 예외를 제외하고 작동합니다. 기본값은 다릅니다. flexDirection이 행 대신 열로 기본 설정되어 있고, alignContent가 stretch 대신 flex-start로 기본 설정되어 있고, flexShrink가 1 대신 0으로 기본 설정되어 있으며, flex parameter는 단일 숫자만 지원합니다. 참조 : https://reactnative.dev/docs/flexbox Layout with Flexbox · React Native A component can specify the layout of its children using the Flexbox algorithm... 2024. 3. 15. 이전 1 2 다음
