1. Navigation React Native는 지속적으로 개발되어 가고 있기 때문에, 버전별 사용법이 다를 수 있다. 그렇기 때문에 공식 문서(reactnavigation.org/docs/getting-started)를 확인하여 제작하는 것을 권장한다. 설치된 목록은 package.json 파일에서 확인할 수 있다. // Navigation 설치 npm install @react-navigation/native // 의존성 설치 npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view n..

1. 사전 작업 새로운 프로젝트 생성 2. Navigation React Native는 지속적으로 개발되어 가고 있기 때문에, 버전별 사용법이 다를 수 있다. 그렇기 때문에 공식 문서(reactnavigation.org/docs/getting-started)를 확인하여 제작하는 것을 권장한다. 설치된 목록은 package.json 파일에서 확인할 수 있다. // Navigation 설치 npm install @react-navigation/native // 의존성 설치 npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-co..

1. Image 이미지는 로컬에서 가져오는 방법(1)과 원격에서 이미지를 가져오는 방법(2)으로 나뉜다. assets 폴더와 그 하위에 images 폴더 생성 무료 이미지를 다운로드한 뒤 images 폴더에 삽입 (1) import React, { Component } from 'react'; import { View, Text, StyleSheet, ScrollView, Button, TextInput, Image } from 'react-native'; ... import Snow from './assets/images/snow.jpg' class App extends Component { ... render() { return ( ) } } const styles = StyleSheet.create..

1. Picker 1) Picker 설치 Picker 설치는 React Native Community 깃허브 페이지(github.com/react-native-picker/picker)에서 설치하면 된다. (설치 시 npm을 멈추고 진행) 사용 방법은 하단에 잘 기술되어 있다. npm install @react-native-picker/picker --save 설치가 완료되면 ios 폴더로 이동하여 pod install을 실행해주어야한다. cd ios npx pod-install cd .. ※ React Native Community(github.com/react-native-community) 깃허브 페이지는 버전 업그레이드에 따른 별도 설치 안내, 필요한 서드파티 라이브러리 다운 등, 현업에서 참고해..

1. ScrollView react-native 모듈로부터 ScrollView를 가져와서 태그를 사용하면 된다. ScrollView도 마찬가지로 공식 문서(reactnative.dev/docs/scrollview)에서 다양한 속성들을 확인할 수 있다. import { View, Text, StyleSheet, ScrollView } from 'react-native'; ... alert('begin')} // 스크롤링이 끝나면 반응 // onMomentumScrollEnd={()=>alert('end')} // 스크롤링이 멈추면 반응 // onScroll={()=>alert('scrolling')} // 스크롤이 움직이면 반응 // onContentSizeChange={(width, height)=>al..

1. 사전 작업 1) header 작업 src 폴더 생성 src 폴더 하위에 header.js 파일 생성 header.js 파일에 코드 작성 (1) App.js 파일에 header.js 파일 import 및 적용 (2) (1) import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; const Header = () => ( This is header. ) const styles = StyleSheet.create({ header: { backgroundColor: 'pink', alignItems: 'center', width: '100%' } }) export default Header; (2) import Rea..