본문 바로가기

개발/React, React Native

Conditional Rendering https://www.vobour.com/book/view/gT7qPZQ45nBDSRr2M 리액트(React) 이해 기초 2 - Conditional Rendering if /elseconst ConditionalComponent = ({ loading, data }) => { if (loading) { return } return {data} }; switch / caseconst Dialog({ type, ...rest }) => { switch(type) { case 'share': return ; case 'edit': return ; case 'delete': return ; default: return null; } }; && ||const LogicalAnd = ({ username }) =.. 더보기
link library 참고. image picker 예) react native art 라이브러리 1. react native 프로잭트 내 ios\프로젝트이름.xcodeproj 열기2. react native 프로잭트 내 node_modules\react-native\Libraries\ART\ART.xcodeproj 파일 확인해서3. Xcode에서 프로젝트 하단 Libraries 밑에 드래그 해서 넣어주기.4. Xcode에서 플젝이름 누르고 우측에서 Build Phases 탭 선택 -> Link Binary With Libraries 확장.5. 다시 왼쪽 패널 Libraries밑에 ART.xcodedproj 밑에 Products 밑에 libART.a 를 우측 Link Binary With Libraries에 추가 더보기
제목 없음 npm install -g firebase-tools firebase loginY mkdir one-time-password cd one-time-password/ firebase init(enter)(enter)(enter)Ypublicno project IDhttps://console.firebase.google.com/project/one-time-password-/functions/list firebase deploy --project one-time-password- overview -> project-settings -> service accountsadmin.initializeApp({ credential: admin.credential.cert(serviceAccount), database.. 더보기
animation system LayoutAnimation세팅 쉬움.자유자재로 컨트롤 불가 Animated세팅 복잡컨트롤 커스터마이징 가능 Animbated Module Values Module: Value, ValueXY (item x,y위치)Types Module: Spring, Decay, Timing (animation이 어떻게 변하고 있는지)Components Module: View, Text, Image (Apply the animation's current position to an actual component) 더보기
expo https://expo.io/https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html npm install -g exp && exp path 앞으로 만들 때 expo xde에서 만든다.project -> new project 더보기
what is rct in react native (xcode or ios) https://facebook.github.io/react-native/docs/native-modules-ios.html RCT 는 ReaCT 의 줄임말임 RCTCameraRoll.xcodeprojRCTPushNotification.xcodeproj platform(ex. iOS) API 에 접근할 필요가 있을 때 아직 react-native 에서 제공하지 않는다거나, 기존에 만들었던게 있으면 새로 module을 만들어 사용하면 된다.리액트 네이티브에서 말하길. 필요한게 아직 없다면, you should be able to build it yourself! 난 안 만들래.. 더보기
color-blend-mode https://github.com/ProjectSeptemberInc/gl-react-native 더보기
full size image background 효과 return ( ddd ddd ddd ddd )const styles = { containerStyle: { flex:1, backgroundColor: 'transparent' }, backgroundImage: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, opacity: 0.2, width: null, height: null, resizeMode: 'stretch', } }; 스타일 값 밖으로 빼야함. 코드 테스트 하느라 정리 안함.View에 backgroundColor transparent 안 주면, scrollview 내용 배경색이 흰색됨.width, heigth null 안주면 사진이 계속 원래 사이즈와 ratio에 맞춰 나옴 원.. 더보기
storage관련 https://medium.com/@bosung90/tackling-react-native-storage-part-1-d27b2bfa480f AsyncStoragehttps://facebook.github.io/react-native/docs/asyncstorage.html Realmhttps://realm.io/kr/news/realm-react-native-1-0/ firebase 나는 AyncStorage로 관리하다가 export해야할때 firebase를 사용할 예정.앱이 온라인 환경일 필요가 없어서 AsyncStorage를 사용하는 것이고,사용자가 데이터 보관을 해야할 때는 firebase. 이유는 익숙해서. AsyncStorageAsyncStorage는 로컬저장소.단점: slow runtime,.. 더보기
image picker https://github.com/marcshilling/react-native-image-picker https://goshakkk.name/react-native-camera-roll-image-picker/https://facebook.github.io/react-native/docs/imagepickerios.html 기기의 camera roll에 접근하기 위해 아래의 스텝 필요photo library usage 선언RCTCemeraRoll library 연결 photo library usage 선언현재위치, 카메라, 연락처 등 iOS에서 private 데이터는 사용자 허가 필요.app metadata에서 목록화 하면 됨 react native 프로젝트 내 iOS 폴더에서 플젝이름.xcodepro.. 더보기
리액트 네이티브 유데미 강의 섹션9~ react-native init auth npm install --save firebase ==== 섹션11 redux reducer: a function that returns(produce) some data action: an object that tells the reducer how to change its dataex. 'asdf'를 array로 바꿀 것.(type: 'split') state: application data. data for our app to use. store: an object that holds the application's data. Login 과정User Types Sth -> Call Action Creator with new text -> Action Crea.. 더보기
리액트 네이티브 유데미 강의 섹션1~8 https://github.com/StephenGrider/ReactNativeReduxCasts react native 프로젝트 생성react-native init albums(프로젝트이름) 빌드,에뮬레이터react-native run-ios entry pointindex.android.js index.ios.js 컴포넌트 개발 스텝 render 할 때Root componenet만 AppRegistry.registerCompontent 사용root componene라는 것은 젤 첨에 보여주고 싶은 최초 컴포넌트를 의미.그 다음 child component는 export 사용 built in debuggercommand d -> remote debugging -> 개발자도구 (command shift j) 더보기

티스토리툴바