1. XY Animation 1) 기본 import React, { Component } from 'react'; import { View, Text, StyleSheet } from 'react-native'; import AnimOne from './src/Animation01' class App extends Component { render() { return ( ) } }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#FFF' } }); export default App; import React, { Component } from 'react'; import { View, Text, StyleSheet, ..

1. 사전 작업 새로운 프로젝트 생성 2. React Native Contacts 1) React Native Contacts 설치 깃 허브(github.com/morenoh149/react-native-contacts)의 메뉴얼에 따라 설치를 진행한다. npm install react-native-contacts --save 2) Podfile 수정 프로젝트의 ios 폴더 하위의 Podfile에 하단의 내용을 추가해준다. target 'app' do ... pod 'react-native-contacts', :path => '../node_modules/react-native-contacts' { this.requestContactPermisson() .then((didGetPermission)=> {..

1. 사전 작업 새로운 프로젝트 생성 2. Image Picker 1) Image Picker 설치 npm install --save react-native-image-picker cd ios pod install cd .. ※ Android 에뮬레이터 실행할 때, ImagePicker 라이브러리 버전에 따라 생기는 '> Manifest merger failed : uses-sdk:minSdkVersion 16 cannot be smaller than version 21 declared in library [:react-native-image-picker]' 문제가 발생한다면, 'android/build.gradle'에서 minsdkVersion 정보를 오류의 정보대로 버전을 수정하면 된다. builds..

1. Nesting Navigators 1) Stack, Tab Navigator Nesting Stack Navigator ㄴㅡ Tab Navigator ㄴㅡ Tab Screen ㄴㅡ Tab Screen ㄴㅡ Stack Screen ㄴㅡ Stack Screen import 'react-native-gesture-handler'; import React, { Component } from 'react'; import { View, Text, StyleSheet, Image, Button, Linking } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigat..

1. React Native Vector Icons 1) React Native Vector Icons 설치 깃 허브(github.com/oblador/react-native-vector-icons)의 메뉴얼에 따라 설치를 진행한다. npm install --save react-native-vector-icons 2) iOS 설정 xcode로 프로젝트의 ios 폴더를 열고, Fonts라는 New Group을 추가 (1) xcode의 Fonts 그룹에 ttf 파일(프로젝트 - node_modules- react-native-vector-icons - Fonts 하위에 존재)을 이동 (2) xcode Info.plist에 Fonts provided by application의 item에 ttf 정보 추가 (..

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..