18. React-Native navigation

React Navigation

 

 

1개의 화면으로 동작하는 App은 거의 찾아볼 수 없다. 상태와 동작에 따라 화면을 전환해주는 무언가가 필요한데 이런 화면간 이동을 도와주는 라이브러리가 React Navigation이다. Navigation은 stack 구조로 되어있어서 화면을 이동하면 전 화면이 사라지는 것이 아니라 기존의 화면 위에 새로운 화면이 쌓이는 구조로 되어있다.

 

---

설치

 

1. 터미널을 킨 후 navigation을 사용하고 싶은 프로젝트에 들어간다.

2. 패키지 설치

   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 
   npm install @react-navigation/stack

3. cocoapods 설치

   npx pod-install ios

 

---

Create Navigation

import React from 'react'; 
import { View, Text, StyleSheet } from 'react-native'; 
import { NavigationContainer } from '@react-navigation/native'; 
import { createStackNavigator } from '@react-navigation/stack'; 

const HomeScreen = () => { 
	return ( 
    	<View style={styles.homeScreen}> 
        	<Text>HomeScreen</Text> 
        </View> 
    ) 
} 
// 앱이 각 화면이 전환될 수 있는 기본 틀을 제공한다. 
const Stack = createStackNavigator(); 

const App = () => { 
	return ( 
    	//네비게이션의 트리를 관리해주는 컴포넌트 
        <NavigationContainer> 
        	{/* 네비게이션 기본틀의 스택을 생성 */} 
            <Stack.Navigator> 
            	{/* 해당스택에 들어갈 화면 요소를 넣어준다. */}
                <Stack.Screen name="Home" component={HomeScreen}/> 
            </Stack.Navigator> 
        </NavigationContainer> 
    ) 
} 

const styles = StyleSheet.create({ 
	homeScreen: { 
    	flex: 1, 
        alignItems: 'center', 
        justifyContent: 'center' 
    } 
}) 
export default App;

 

 

→ createStackManager : 네비게이션 스택에 사용할 기본 틀을 제공한다. 2개의 속성을 포함하는데 Screen과 Navigator가 있다.

• Navigator : 네비게이션 스택을 생성한다.

• Screen : 스택안에 들어갈 화면 요소를 설정한다. (name = title명, componenet = 실제 화면컴포넌트)

 

→ NavigationContainer : 네비게이션 트리를 관리해주는 컴포넌트이다.

 

---

화면 간 이동

import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const HomeScreen = ({navigation}) => {
  return (
    <View style={styles.screen}>
      <Text>HomeScreen</Text>
      <Button
        title="Go to Details"
        onPress={ () => navigation.navigate('Details')}
      />
    </View>
  )
}

const DetailsScreen = ({navigation}) => {
  return (
    <View style={styles.screen}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details again"
        onPress={ () => navigation.push('Details')}
      />
      <Button 
        title="Go to Home"
        onPress={ () => navigation.navigate('Home')}
      />
      <Button
        title="Go Back"
        onPress={() => navigation.goBack()}
      />
      <Button 
        title="Go back to first screen in stack"
        onPress={() => navigation.popToTop()}
      />
    </View>
  )
}
// 앱이 각 화면이 전환될 수 있는 기본 틀을 제공한다.
const Stack = createStackNavigator();

const App = () => {
  return (
    //네비게이션의 트리를 관리해주는 컴포넌트
    <NavigationContainer>
      {/* 네비게이션 기본틀의 스택을 생성 */}
      <Stack.Navigator>
        {/* 해당스택에 들어갈 화면 요소를 넣어준다. */}
        <Stack.Screen name="Home" component={HomeScreen}/>
        <Stack.Screen name="Details" component={DetailsScreen}/>
      </Stack.Navigator>
    </NavigationContainer>
  )
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default App;

→

❗ 반드시 화면 컴포넌트 인자에 navigation를 포함시켜야한다.

 

 

→ navigation : Screen의 구성요소는 navigation props를 자동으로 제공받는다. 이 props를 통해 화면간 이동을 할 수 있게 된다.

 

navigation props

• navigate(string) : 스택안에 있는 화면요소로 이동한다. 이 때 인자에는 가고 싶은 화면의 name을 입력한다. (자신한테 가는것은 불가능)

• goBack() : 바로 전 화면으로 돌아간다.

• push(string) : navigate랑 같은 기능을 하는데 자신 → 자신으로 갈 수 있다.

• popToTop : 첫번째 페이지로 돌아간다.

 

 

Uploaded by Notion2Tistory v1.1.0