react-native (7) 썸네일형 리스트형 react native AsyncStorage 사용 - ① 로그인 상태에 따라 다른 헤더 출력 (db없이 내용 저장하기) 오늘 목표는 로그인 전에는 로그인버튼이 나오게, 로그인 후에는 ETH버튼이 나오게 하는것이다! 왼쪽이 로그인 전, 오른쪽이 로그인 후의 헤더 모습이다! 우선 프론트엔드만 다룰거라 DB를 사용하지 않을거기 때문에 react native의 async storage를 사용하려고 한다. async storage를 간단히 말하자면 앱이 종료되도 값이 사라지지 않고 남아있는 기능을 구현한다. (state로 해결할 수 없는 부분!) 바로 코드를 짜보자. import AsyncStorage from '@react-native-community/async-storage'; //asyncstorage import! export default class MainScreen extends React.Component { co.. react native 기본 컴포넌트화 - ① (폴더/파일 정리 , index.js) react native의 핵심이자 핵심이자 핵심인 컴포넌트화! 아주 기본적인 폴더/파일 정리부터 시작해보자. screen, component 2개 폴더를 생성! 절대 루트에 지저분하게 다 내놓지 말것.. (전 처음에 그랬답니다^^) 우선 screen폴더에는 말그대로 앱에서 보여지는 페이지.js들을 넣었다. 각 페이지에 들어가는 컴포넌트들을 component폴더에 넣음! 컴포넌트들 중에 많이 사용되는건 common 일정 페이지에서만 사용되는건 그 페이지의 폴더를 만들어서 넣었다. component/common/commonelement 폴더를 예시로 보자. index.js를 포함한 컴포넌트.js파일들이 들어있다. 원래대로면 저 아이들을 해당되는 모든페이지에 다 적어야 했겠지만 컴포넌트화로 인해 불러오기만 하.. react native 아이콘 사용하기(react-native-vector-icons) 1. npm install react-native-vector-icons --save 명령어로 설치! 2.react-native link react-native-vector-icons 명령어로 라이브러리와 프로젝트 연결. import Icon from 'react-native-vector-icons/Ionicons'; export default class WrongText extends React.Component { render() { return ( ... ); } } 3. import문 작성 4. 원하는 아이콘 찾아서 배치! (react-native-vector-icons directory (oblador.github.io)) 이 사이트에서 아이콘 종류 확인 가능하다 아이콘이 잘 나오는것을 확인! react-native image slide구현 (horizontal scrollview를 이용해보자) 이번 프로젝트를 진행하며 생각보다 시간이 오래 걸린 부분이다 왜냐면 map도 몰랐고, json파일 불러오는법도 몰랐고, 컴포넌트화도 몰랐기 때문 (그냥 아무것도 아는게 없었다^^) 결과부터 보고 가도록 하자. 이런식으로 5개 페이지로 구성. 각 페이지는 작품 이미지와 작가이름(title), 작품이름(content) 등으로 구성! narrow아이콘 클릭시 왼쪽 오른쪽으로 넘어가게 설정까지 하는게 목표! 우선 처음 이걸 시작했을때는 밑도끝도 없이 모든 페이지마다 저 정보들을 다 적었었다...하하하ㅏ하핳 이제는 json을 이용할 줄 알기에! 큰 구조를 먼저 짚고 가자면 MainScreen.js -> Slide.js ->datalist.json 이렇게 됩니다. root에 datalist.json파일을 만들어줍시.. react native 다국어 설정_i18n사용!(사용자기기 언어 불러와 적용하기) 유저 기기에 설정된 언어를 가져와서 앱에 적용해보려고 합니다! 즉 한국어로 사용중이라면, 앱의 컨텐츠가 한국어로 뜨게 하는거죠! 우선 react-native-i18n을 설치해줍시다. npm install react-native-i18n --save 명령어를 터미널에 실행! 그 후 src/config에 i18n.js파일을 만들어주세요! (폴더는 임의로 만들어 주셔도 됩니다) import I18n from 'react-native-i18n'; import en from './locales/en'; //en파일 import ko from './locales/ko'; //ko파일 I18n.defaultLocale = 'ko-kr'; //default로 한국어 설정(유저 기기 언어가 보기 중에 없을경우) I18n.. react native TextInput 내용 초기화 아이콘(서치바 내용 지우는 아이콘 만들기) 서치바를 만들면서 꼭 구현하고 싶었던 기능이다. 이렇게 서치바(TextInput)이 있고 글자를 입력할 시 x아이콘이 등장! 아이콘 클릭시 작성된 내용이 다 삭제되도록 구현하고 싶었다. 이것 또한 진짜 별거 아니지만 생각보다 시간을 많이 써버려서... 같은 기능 구현하고 싶으신 분들 참고하세요! 1. useState TextInput이 공란인지, 뭔가 입력되어있는지 확인해야 하기 때문에 useState를 사용할 것이다. null일 경우 x아이콘의 투명도(opacity)를 0으로, 공란이 아닐경우 1로 설정! 이때 opa_num이 x아이콘의 style로 사용될 예정입니다. 2. onChangeText TextInput의 value를 text로 설정해서 onChangeText로 value값을 받아오게 설정!.. react native 헤더 고정 (스크롤 시 상단에 닿을경우 고정하기) react native 개발을 진행하면서 찾다찾다가 못찾아서 헤맨 기능이다. html에서는 상단과 해당 요소와의 거리를 계산해서 자바스크립트로 코드를 짜는것 같은데 react native에서는 아주 간단히 해결할 수 있다! 목표는 서치바 컴포넌트가 스크롤 되다가 상단부에 걸려서 고정되게 하는것! 이렇게 서치바가 고정되고 나머지 부분만 스크롤 되는것을 확인할 수 있다. 결론은 해당 뷰에 stickyHeaderIndices={[1]} 만 작성해주면 된다! 이때 1은 고정시킬 컴포넌트 순서이다. 나는 제일 상단 헤더, 그 밑의 서치바 컴포넌트를 고정시키고 싶었기 때문에 1로 작성( 0부터 시작임) 이런식으로 스크롤뷰에 적용시켜주면 된다! 아주 쉬운거였는데 너무 해멨다... 이전 1 다음
