FE/REACT_NATIVE 20

REACT-NATIVE- custom tab bar

https://maruzzing.github.io/study/rnative/React-Native-%EC%BB%A4%EC%8A%A4%ED%85%80-%ED%83%AD-%EB%B0%94-%EB%84%A4%EB%B9%84%EC%BC%80%EC%9D%B4%EC%85%98-%EB%A7%8C%EB%93%A4%EA%B8%B0/ React Native 커스텀 탭 바 네비케이션 만들기 React Navigation을 이용하여 Top Tab Bar를 커스텀 하는 방법을 알아보자. maruzzing.github.io https://velog.io/@blacksooooo/React-native-nested-navigation-bottom-tab-modal-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-n..

FE/REACT_NATIVE 2022.07.19

REACT-NATIVE - pickerSelect

https://taehoon95.tistory.com/116 [React Native] PickerSelect 사용하기 (datepicker) 개요 앱에서 picker는 사용자의 입력값을 개발자가 제시함으로써 입력에 대한 오류를 줄일 수 있는 방법입니다. 저는 개인 프로젝트를 진행하면서 2가지의 PickerSelect가 필요했습니다. 이 블로그에 taehoon95.tistory.com https://github.com/mmazzarolo/react-native-modal-datetime-picker GitHub - mmazzarolo/react-native-modal-datetime-picker: A React-Native datetime-picker for Android and iOS A React-N..

FE/REACT_NATIVE 2022.07.14

REACT NATIVE - 더보기 누르면 글 보이게 하기

const [line, setLine] = useState(2);//몇번째 줄까지 보여줄 껀지 const [isActive, setIsActive] = useState(false);//눌렸는지 안눌렸는지 확인하는 용도 const handelLine =() => {//누르면 라인을 글씨 최대 길이로 변경하기 isActivated ? setLine(2) : setLine(Number.MAX_SAFE_INTEGER); setIsActive((prev) => !prev); } //말줄임표는 뒤에 최대 길이는 2번째 줄까지 이렇게 글씨가 택도 없이 길어지는 경우에는 어찌해야 하나요? 이렇게 글씨가 택도 없이 길어지는 경우에는 어찌해야 하나요? 이렇게 글씨가 택도 없이 길어지는 경우에는 어찌해야 하나요? 이렇게 글..

FE/REACT_NATIVE 2022.07.08

REACT-NATIVE - 처음 이후 설정

*타입스크립트로 앱 실행하기 npx react-native init {파일 이름} --template react-native-template-typescript ** 플리퍼 사용하긩 yarn add react-native-flipper redux-flipper rn-async-storage-flipper @react-native-async-storage/async-storage cd ios/ pod-install 17. iOS Deployment Target 설정하기 좌측에 Test 선택 Info 선택 Deployment Target iOS Deployment Target 12.1 18. iOS Simulator SDK 설정하기 좌측에 Test 선택 Build Settings Architectures E..

FE/REACT_NATIVE 2022.06.22

REACT-NATIVE - 폴더구조

폴더 구조 android: 안드로이드 네이티브 폴더 ios: ios 네이티브 폴더 node_modules: 노드 라이브러리 app.json: name은 앱 컴포넌트 이름이니 함부로 바꾸면 안 됨, 이거 바꾸면 네이티브 컴포넌트 이름도 다 바꿔야함, displayName은 앱 이름 변경용 ios/FoodDeliveryApp/AppDelegate.m 의 moduleName android/app/src/main/java/com/fooddeliveryapp/MainActivity.java 의 getMainComponentName babel.config.js: 바벨 설정 index.js: 메인 파일 App.tsx: 기본 App 컴포넌트 metro.config.js: 메트로 설정 파일(웹팩 대신 사용) tsconf..

FE/REACT_NATIVE 2022.06.22

REACT-NATIVE - pod install 왜 사용 하는 걸까?

pod install pod 프로젝트에 세팅하기 위하여 맨 처음에 사용함 profile의 pod을 추가, 삭제할 때도 사용한다 명령어를 실행하면 새로운 pod을 다운받고 설치한다. 각 pod 마다 설치된 버전을 profile.lock에 기록한다. profile.lock은 설치된 pod 버전을 기록하고 유지시키는 역할을 한다. 명령어를 실행하면 profile.lock에 리스트 된 팟들에 대해서 지정된 버전만 다운로드한다. (새로운 버전이 존재하는지는 체크하지 않음) pod update {팟 이름} 코코아 팟은 해당 팟의 업데이트된 버전이 있는지 검색한다 profile.lock을 참조하지 않는다 이 명령어는 팟을 최신 버전으로 업데이트 시켜주는 역할을 한다. 단순하게 pod update만 실행하면 모든 팟에..

FE/REACT_NATIVE 2022.06.08

REACT-NATIVE - M1 React-Native 첫 세팅하기! (react Native CLI)

1. Xcode 설치하기 가장 오래 걸리기 때문에 처음부터 설치 하기를 권장 appstore에서 로그인후 설치하기 2. Homebrew설치하기 https://brew.sh/index_ko #설치 후 next step에 있는거 그대로 복붙 # zsh 설정 파일 열기 vim ~/.zshrc # 작성 eval $(/opt/homebrew/bin/brew shellenv) # homebrew 버전 확인 brew --version Homebrew 3.2.6 ​ # homebrew 정상 작동 확인 # 정상일 때 아무것도 안 뜸 eval $(/opt/homebrew/bin/brew shellenv) 3. zsh, oh-my-zsh 설치하기 # zsh 설치 brew install zsh ​ # oh-my-zsh 설치 ..

FE/REACT_NATIVE 2022.06.07