React Router

- react navigation: https://reactnavigation.org/docs/getting-started/

- 다음 버전을 사용하였습니다.

"@react-navigation/native": "^6.0.11",
"@react-navigation/stack": "^6.2.2",

 

 

리액트 네이티브에서 사용하는 react-navigation은 stack 방식을 사용한다. 

stack 방식은 클릭을 했을때 화면이 하나씩 stack에 쌓이는데 그중 최상위 것을 보여주는 방식이다. 

그리고 back 버튼을 누르면 최상단의 화면을 제거하므로써 이전 화면을 보여준다. 

나름이해가 쉽게 그려보았다.

 

* 설치 

expo install @react-navigation/native
expo install @react-navigation/stack

1. 화면 이동하기 

Home 과 Detail 페이지 이동하기

 

createStackNavigator() 로 Stack을 생성한다. 

Stack.Navigator 안에 Stack.Screen을 사용하여 연결할 screen을 생성한다.  

Stack.screen에 name 에 URL을 넣고 component를 연결한다. 

 

화면에서 props으로 navigation을 받을 수 있다. 

console로 어떤 값이 넘어오는지 확인해보면 다양한 기능들이 있다. 

 

navigate(url) 을 통하여 url로 상세페이지로 이동 할 수 있고, 

상세 화면에서는 goBack()을 사용하여 다시 Home 페이지로 돌아갈 수 있다.  

 

참고로 navigate 대신 push를 사용해도 좋다. 

navigate와 goBack도 같이 쓸수 있지만, 위의 그림처럼 navigate는 위로 페이지를 새로 쌓는방식일 것 같고, goBack은 최상단 페이지를 없애는 방식일 것 같다. (정확히 소스를 분석해보거나 테스트를 해보지 않아서 100% 확실하지는 않다!😂)

navigation >>  Object {
  "addListener": [Function addListener],
  "canGoBack": [Function canGoBack],
  "dispatch": [Function dispatch],
  "getId": [Function getId],
  "getParent": [Function getParent],
  "getState": [Function anonymous],
  "goBack": [Function anonymous],
  "isFocused": [Function isFocused],
  "navigate": [Function anonymous],
  "pop": [Function anonymous],
  "popToTop": [Function anonymous],
  "push": [Function anonymous],
  "removeListener": [Function removeListener],
  "replace": [Function anonymous],
  "reset": [Function anonymous],
  "setOptions": [Function setOptions],
  "setParams": [Function anonymous],
}

// HomeNavigator.js
import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer } from '@react-navigation/native';

// components
import Home from "../screens/Home";
import ReviewDetails from '../screens/ReviewDetails'

const HomeStack = createStackNavigator()

export default function HomeNavigator() {
    return(
        <NavigationContainer>
            <HomeStack.Navigator>
                <HomeStack.Screen name="Home" component={Home} />
                <HomeStack.Screen name="ReviewDetails" component={ReviewDetails} />
            </HomeStack.Navigator>
        </NavigationContainer>
    )
}

// Home.js
import { StyleSheet, View, Text, Button } from 'react-native'
import React, { useState } from 'react'
import { globalStyles } from '../styles/global'

export default function Home({ navigation }) {
  const pressHandler = () => {
    navigation.navigate('ReviewDetails')
    // navigation.push('ReviewDetails')
  }

  return (
    <View style={globalStyles.container}>
      <Text style={globalStyles.titleText}>Home Screen</Text>
      <Button title='Go to review2' onPress={pressHandler} />
    </View>
  )
}

import { StyleSheet, View, Text, Button } from 'react-native'
import React, { useEffect } from 'react'

export default function ReviewDetails({navigation}) {

  const pressHandler = () => {
    // navigation.navigate('Home')
    navigation.goBack()
  }
  
  return (
    <View style={styles.container}>
      <Button title="Go back to Home" onPress={pressHandler} />
    </View>
  )
}


const styles = StyleSheet.create({
    container: {
        padding: 24
    }
})

 

페이지 이동

 

 

2. 페이지에서 파라미터로 데이터 받기 

화면에서 props으로 navigation를 받아서 페이지 이동하는 함수를 쓸 수 있었는데, 

비슷하게 route를 props으로 받아서 data를 전달 할 수도 있다. 

FlatList 에 item을 클릭시 상세 페이지로 이동하면서 데이터를 같이 넘겨 보았다.

// Home.js
import { StyleSheet, View, Text, Button, FlatList, TouchableOpacity } from 'react-native'
import React, { useState } from 'react'
import { globalStyles } from '../styles/global'

export default function Home({ navigation }) {

  const [reviews, setReviews] = useState([
    { title: 'Apple', rating: 5, body: 'Apple is yam', key: '1' },
    { title: 'Banana', rating: 3, body: 'Banana is sweet', key: '2' },
    { title: 'Orange', rating: 2, body: 'Orange is great', key: '3' },
  ])

  const pressHandler = () => {
    navigation.navigate('ReviewDetails')
    // navigation.push('ReviewDetails')
  }

  return (
    <View style={globalStyles.container}>
      <Text style={globalStyles.titleText}>Home Screen</Text>
      <Button title='Go to review2' onPress={pressHandler} />
      <FlatList
        data={reviews}
        renderItem={({ item }) => (
          // navigate('link', obj) 2번째 파라미터로 오브젝트를 보낼수 있다. 
          <TouchableOpacity onPress={() => navigation.navigate('ReviewDetails', item)}>
            <Text
               style={globalStyles.titleText}
            >{item.title}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  )
}

import { StyleSheet, View, Text, Button } from 'react-native'
import React, { useEffect } from 'react'

export default function ReviewDetails({route, navigation}) {

  const {title, body, rating} = route.params

  const pressHandler = () => {
    // navigation.navigate('Home')
    navigation.goBack()
  }

  return (
    <View style={styles.container}>
      <Text>{title}</Text>
      <Text>{body}</Text>
      <Text>{rating}</Text>
      <Button title="Go back to Home" onPress={pressHandler} />
    </View>
  )
}


const styles = StyleSheet.create({
    container: {
        padding: 24
    }
})

목록 클릭 상세이동

 

다음과 같이 구현할 수 있다! 

---

 

* 번외

그리고 강의를 보다보면 

그리고 react-navigation/stack 를 같이 설치해 주는데, 이는 공식문서에 따르면 stack의 최상위 있는 컴포넌트간의 스크린 전환을 위해 사용되는 듯하다. (Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.)

- react-navigation/stack : https://reactnavigation.org/docs/stack-navigator/