React Native Study04_Spotify Mobile App Clone
React Native_Spotify Mobile App Clone Contents Initialise the expo ...
React Native Navigation
Contents
- Getting started
- Hello React Navigation
- React Navigation 공식문서를 바탕으로 공부한 내용을 정리한 포스팅 입니다.
-
React Natvigation Docs
Getting started
React Native Navigation은 React Native와 함께 사용되는 하나의 모듈이다. 웹이나 앱에서 스크린 이동을 구현하기 위해 사용된다.
Minimum requirements
- react-native = 0.63.0
- expo = 41 (사용하는 경우)
- typescript = 4.1.0 (사용하는 경우)
Installation
React Native project 내 패키지 설치
npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context //install versions of library
npm install react-native-screens react-native-safe-area-context
Wrapping your app in NavigationContainer
전체 앱을 NavigationContainer로 Wrapping
/*index.js 혹은 App.js와 같은 entry file Wrapping*/
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
return (
<NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
);
}
Hello React Navigation
Web browser : a 태그를 통해 스크린 이동구현 (ex. When the user presses the back button, the browser pops the item from the top of the history stack)
React Native : Stack Navigator를 통해 Navigation History관리 및 스크린 이동구현
- 한 개의 Stack Navigator만을 사용할 경우
- Web browser와의 공통점 : 개념적으로 Web browser와 동일하게 스크린 이동구현
- Web browser와의 차이점 : Animation 혹은 gesture를 통해 스크린 이동구현 가능
- Web browser와의 공통점 : 개념적으로 Web browser와 동일하게 스크린 이동구현
Installing the native stack navigator
React Native project 내 설치
npm install @react-navigation/native-stack
Creating a native stack navigator
createNativeStackNavigator : Screen, Navigator properties를 포함하는 function
App.js
{ % raw % }
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack';
function HomeScreen() {
return (
<View style=>
{/*flex: 비율을 통해 크기설정(ex. 1:전체화면에서 1의 비율차지 / 1:1 전체 화면에서 반반 만큼의 공간차지)*/}
<Text>HomeScreen</Text>
</View>
);
}
const Stack = createNativeStackNavigator();
//const : 변수선언 키워드로 ES6이후, var/let/const가 사용됨
function App() {
return (
<NavigationContainer>
{/*NavigationContainer is a component which manages our navigation tree and contains the navigation state. This component mush wrap all navigators structure*/}
<Stack.Navigator>
<Stack.Screen name = "Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
{ % endraw % }
Configuring the navigator
Stack이 두 개의 루트(Home, Details)를 갖도록 코드추가
App.js
{ % raw % }
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack';
function DetailScreen() {
return(
<View style=>
<Text>Details Screen</Text>
</View>
);
}
function HomeScreen() {
return (
<View style=>
{/*flex: 비율을 통해 크기설정(ex. 1:전체화면에서 1의 비율차지 / 1:1 전체 화면에서 반반 만큼의 공간차지)*/}
<Text>HomeScreen</Text>
</View>
);
}
const Stack = createNativeStackNavigator();
//const : 변수선언 키워드로 ES6이후, var/let/const가 사용됨
function App() {
return (
<NavigationContainer>
{/*NavigationContainer is a component which manages our navigation tree and contains the navigation state. This component mush wrap all navigators structure*/}
<Stack.Navigator>
<Stack.Screen name = "Home" component={HomeScreen} />
<Stack.Screen name = "Details" component={DetailScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
{ % endraw % }
Appendix
Navigation 외 발생했던 문제들 :
- Android emulator reload failed
오류 : warn No apps connected. Sending “reload” to all React Native apps failed
원인 :
- 기기연결 불안정 해결 :
- adb reverse tcp:8081 tcp:8081 (연결 재설정)
