리액트 네이티브 (React Native, RN)
-
React Native | 실제 디바이스, 기기로 테스트 하기리액트 네이티브 (React Native, RN) 2021. 9. 15. 17:51
# iOS 기기에서 앱 실행 Xcode 실행 → Open a project or file React Native 프로젝트 → ios 폴더 선택 → Open ① 연결된 기기 선택 ② Signing에서 Provisioning Profile 인증 ③ 실행 # Android 기기에서 앱 실행 연결된 기기 이름 확인 후 adb reverse 사용 #연결된 디바이스 이름 확인 adb devices #adb reverse 사용 adb -s 디바이스 이름 reverse tcp:8081 tcp:8081 #프로젝트 경로에서 run android npx react-native run-android
-
React Native | 안드로이드 GIF 이미지 적용하기리액트 네이티브 (React Native, RN) 2021. 9. 9. 16:50
▶ 프레스코(Fresco) React Native에서 gif 이미지 적용 시 IOS는 별도의 설정이 필요 없지만, 안드로이드는 fresco 라이브러리(페이스북이 만든 안드로이드 이미지 라이브러리)를 추가해야 정상적으로 작동한다. 1. build.gradle (Root : ~/android/app/build.gradle) 2개의 라이브러리를 추가한다. implementation 'com.facebook.fresco:animated-gif:2.5.0' implementation 'com.facebook.fresco:fresco:2.5.0' 2. 1번 방법으로 안될 경우에는 프로젝트 속성에서 직접 추가해준다. 프로젝트 우 클릭 > Open Module Settings Dependencies > + > Libr..
-
React Native | image slider, 이미지 슬라이더 구현리액트 네이티브 (React Native, RN) 2021. 6. 23. 14:37
아래 React Native 개발 환경 구축을 바탕으로 작성되었습니다. ); } export default App; Reference https://www.npmjs.com/package/react-native-image-slider-box/v/1.0.12#usage- react-native-image-slider-box A simple and fully customizable React Native component that implements an Image Slider UI. www.npmjs.com
-
React Native | Bottom Tabs Navigator 화면 전환 구현리액트 네이티브 (React Native, RN) 2021. 6. 21. 13:52
아래 React Native 개발 환경 구축을 바탕으로 작성되었습니다. { let iconName; if (route.name === "Home") { iconName = focused ? require('./assets/images/home_fill.png') : require('./assets/images/home.png'); } else if (route.name === "MyPage") { iconName = focused ? require('./assets/images/page_fill.png') : require('./assets/images/page.png'); } return ; }, })} tabBarOptions={{ activeTintColor: 'tomato', inactiveTin..
-
React Native | Navigation Stack 화면 전환 구현리액트 네이티브 (React Native, RN) 2021. 6. 17. 15:27
아래 React Native 개발 환경 구축을 바탕으로 작성되었습니다. https://kitty-geno.tistory.com/47?category=956753 Go to the Screen Touch! navigation.navigate('MyPage')} title="Go to the Button Press!"> ); } function MyPage() { return ( MyPage ); } function App() { return ( ); } export default App; ↓ #Reference https://reactnavigation.org/docs/getting-started
-
React Native | 맥(Mac) 개발 환경 구축리액트 네이티브 (React Native, RN) 2021. 6. 16. 11:52
▶ 리액트 네이티브(React Native)란? 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크로 안드로이드, iOS, 웹, UWP용 애플리케이션을 한 번에 개발하기 위해 많이 사용되고 있다. 「 Homebrew 」 Mac에서 필요한 패키지를 설치하고 관리하는 맥(Mac)용 패키지 관리자 https://brew.sh/ Homebrew 설치 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 버전 확인 brew -v 「 Node.js 」 react-native는 Javascript이므로 Javascript의 런타임인 Nodejs 설치 node 설치 brew install nod..