Web/React-Native 6

[RN] 로그인/로그아웃 후 화면 이동

기능할 구현: 앱 접속 시 로그인이 되어있으면 메인 화면 보여주고, 아니라면 로그인 창 띄우기 + 로그아웃 시 바로 로그인 창 띄우기 (asyncStoarge로 토큰을 저장하여 로그인 유지를 했고, navigation을 사용해 화면 이동을 구현했다) 메인 화면에서 토큰을 얻고, 토큰이 없다면 로그인 화면으로 이동시킴 로그인 후 async-storage를 사용해 토큰 저장하고 로그인 유지 로그아웃 시 navigation reset을 사용하여 메인으로 이동시키며 화면 새로고침 (바로 로그인 창 띄우기 위해) // main const [token, setToken] = useState(''); useEffect(() => { getToken(); }, []) const getToken = async () =>..

Web/React-Native 2023.03.05

[RN] 갤러리 커스텀

리액트 네이티브에서 갤러리에 접근할 때, 모달창으로 띄워 커스텀하기 위해 react-native-cameraroll 라이브러리를 사용했다. https://github.com/react-native-cameraroll/react-native-cameraroll 위 라이브러리에서 CameraRoll.getPhotos 메서드를 사용하면 갤러리 이미지 정보를 가져올 수 있다. const {edges, page_info} = await CameraRoll.getPhotos({ first: 21, after: nextCursor, assetType: 'Photos', }); first 파라미터는 처음 가져올 이미지 정보 개수이고, after은 스크롤 시 다음 이미지 정보를 가져오기 위해 사용하였다. 그리고 사진만 ..

Web/React-Native 2023.03.01

[RN] 사용자 현재 위치 정보 얻기 / GeoLocation

RN에서 react-native-community/geolocation 라이브러리를 사용하면 사용자 현재 위치 정보를 쉽게 가져올 수 있다. https://github.com/michalchudziak/react-native-geolocation 가장 먼저 위치 정보를 얻기 위해 권한 설정을 해주어야 한다. // ios // react-native init 시 자동으로 생성되어 따로 추가할 필요 X // 만약 없다면, info.plist에 아래 코드 추가 후 cd ios -> pod install NSLocationWhenInUseUsageDescription // android/app/src/main/AndroidManifest.xml에 아래 코드 추가 // 정확한 위치 // 대략적인 위치 아래 코드는..

Web/React-Native 2023.02.21

[RN] 리액트 네이티브 카메라 및 갤러리 접근

카메라 접근은 react-native-image-picker, 갤러리 접근은 react-native-image-crop-picker 라이브러리를 사용했다. *** 갤러리 접근은 위치 좌표를 가져오기 위해 위 라이브러리를 사용했지만, 별다른 메타데이터가 필요하지 않으면 react-native-image-picker를 사용하면 된다. *** https://github.com/react-native-image-picker/react-native-image-picker https://github.com/ivpusic/react-native-image-crop-picker 사용 전 카메라 및 갤러리 접근을 위해 권한 설정을 해줘야 된다. // ios info.plist에 아래 코드 추가 후 cd ios -> po..

Web/React-Native 2023.02.19

[RN] TextInput 속성

리액트 네이티브에서 input 태그로는 TextInput이 있다. 이 태그는 키보드를 이용해 텍스트를 입력할 때 사용한다. TextInput 태그는 다양한 속성을 갖고 있는데, 대표적인 몇 가지를 정리할 것이다. style : borderWidth와 borderRadius 등 스타일을 지정할 수 있다. - text value : 텍스트 input에 표시할 값이다. (React의 input 태그에서 value와 동일하다.) - string defaultValue : 사용자가 입력을 시작할 때 변경되는 초기값을 제공한다. - string editable : text 편집 가능 유무로, 기본 값은 true이다. - boolean maxLength : 입력할 수 있는 최대 문자 수를 제한한다. - number ..

Web/React-Native 2023.01.13