[React-Native] React Navigation

안녕하세요 세히이 입니다 이번에는 네비게이션을 적용해보았답니다!

 

 Stack Navigator

 

1) 리액트 네비게이션 라이브러리 & 추가 라이브러리 설치

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

 

2) Stack 을 위한 라이브러리 설치

npm install @react-navigation/native-stack

 

3) 필요한 component 를 import 시켜주기 <App.js>

import React, { Component } from "react";
import {View, Text, FlatList} from 'react-native';
import { NavigationContainer} from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

//경로를 위한 import
import Product from "./components/Product";
import UploadProduct from "./components/UploadProduct";

 

4) 경로 지정해주기 <App.js>

const Stack=createNativeStackNavigator();
class App extends Component{
  render(){
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="UploadProduct"> 
             <Stack.Screen name="UploadProduct" component={UploadProduct} 
               options={{title:'UploadProduct'}}/>
              <Stack.Screen name="Product" component={Product}
              options={{title:'Product'}} />
        </Stack.Navigator>
        </NavigationContainer>
        );
  }
}

 

5) 버튼을 눌렸을 때 어느 페이지로 갈지 정해주는 함수 만들어주기 <UploadProduct.js>

goHomeSreen(){
        this.props.navigation.navigate('GetGoods');
    }

 

6) button의 onpress에 함수 적용 <UploadProduct.js>

<Button title="상세보기" onPress={()=>this.goHomeSreen() } />

 

• 결과 화면

 

Tab Navigator

1) Tab 을 위한 라이브러리 설치 ( 아이콘 설정을 위해 아이콘도 같이 )

npm install @react-navigation/bottom-tabs react-native-vector-icons

 

2) 필요한 component를 import 시켜주기 

import React, { Component } from "react";
import { View, FlatList, StyleSheet,Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
//Stack 과 Tab
import { createNativeStackNavigator } from '@react-navigation/native-stack'; 
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
//경로를 위한 import
import Product from "./components/Product";
import UploadProduct from "./components/UploadProduct";
import ModalTest from "./components/ModalTest";

 

3) 경로 지정해주기 - const Tab 추가와  stack으로 되어있던 부분을 Tab으로 수정하면 끝

const Stack = createNativeStackNavigator();//Stack일 경우
const Tab = createBottomTabNavigator();
class App extends Component {
  render() {
    return (
      <>
        <NavigationContainer>
          <Tab.Navigator initialRouteName="UploadProduct">
            <Tab.Screen name="Upload Product" component={UploadProduct} />
            <Tab.Screen name="Product" component={Product} />
            <Tab.Screen name="모달연습" component={ModalTest} />
          </Tab.Navigator>
        </NavigationContainer>
      </>
    );
  }
}

 

• 결과 화면

 

 

근데 아이콘이 추가가 안된다.. 서치해서 모든 걸 다 시도해봤는데 안댐... 꼭 성공해서 돌아오리라

 

(추가) navigation 오류 발생 !!

다른 폴더에서 네비게이션을 다시 설치 해보려고 하니 오류가 마구마구 떴다

 

해결 방법 

npm install @react-navigation/native @react-navigation/native-stack --legacy-peer-deps

 

뒤에 --legacy-peer-deps가 강제로 설치하게 하는 뜻인 것 같다.

영어를 번역해서 찾은거라 정확하지가 않지만

이렇게 하니까 실행이 되는 것을 확인하고 Tab도 똑같은 방식으로 설치를 해주었다

npm install @react-navigation/native @react-navigation/bottom-tabs --legacy-peer-deps