[React Native -4] Navigation

버튼을 클릭했을 때 화면 이동해보기 

 

화면 간 전환을 도와주는 라이브러리가 React Navigation이다 

React Native는 더 이상 navigation을 제공하지 않는다 따라서 우리가 직접 라이브러리를 설치해야 한다

 

✅ 리액트 내비게이션 라이브러리 설치

npm install @react-navigation/native

npm install react-native-screens react-native-safe-area-context

---

내비게이션의 종류에는 Stack 내비게이션, Tab 내비게이션, Drawer 내비게이션이 있다

 

 

Stack 내비게이션

✅ stack 내비게이션 라이브러리 설치

npm install @react-navigation/native-stack

 

App.js

import React,{Component} from 'react';
import { StatusBar,Button,StyleSheet,Text,View,FlatList, Image, Alert} from 'react-native';
import { NavigationContainer} from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import Home from "./src/components/Home";
import GetGoods from "./src/components/GetGoods";
 
const Stack=createNativeStackNavigator();
 class App extends Component{
  render(){
    return (
      
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
             <Stack.Screen name="Home" component={Home} 
               options={{title:'Home'}}/>
              <Stack.Screen name="GetGoods" component={GetGoods}
              options={{title:'상세보기'}} />
         </Stack.Navigator>
        </NavigationContainer>
        );
  }
}
 export default App;

• NaviagionContainer : 네비게이션 트리를 관리해주는 컴포넌트
• createNativeStackNavigator : 네비게이션 stack에 사용할 기본 틀 제공 - Screen(화면요소 설정) Navigator (스택 생성)

 

src > components > Home.js  

import React,{Component} from 'react';
 import { StatusBar,Button,StyleSheet,Text,View} from 'react-native';
 import {styles} from "../styles/stylesheet";

 class Home extends Component{
    render(){
        return(
        <View style={styles.container}>    
            <View style={styles.container1}>
            <Text style={styles.text}>Welcom to Jiyumi Project !</Text>
             <Button title="상세보기" color="gray" onPress={()=>this.goHomeSreen() } />
            <StatusBar style="light" />
            </View>
        </View> 
        )
    }
    goHomeSreen(){
        this.props.navigation.navigate('GetGoods');
    }
}
export default Home;

 

src > components > GetGoods.js 

import React,{Component} from 'react';
import { StatusBar,Button,StyleSheet,Text,View} from 'react-native';
import {styles} from "../styles/stylesheet";

class GetGoods extends Component{
    render(){
    return(
       <View style={styles.container}>
          <View style={styles.container2}>
          <Text style={styles.text}>Hi my name is Jiyun</Text>
          </View>

          <View style={styles.container3}>
          <Text style={styles.text}>My age is 23</Text>
          </View>
      </View> 
        )
    }
}
export default GetGoods;

 

 

 

실행화면

 

 

 

라우트 파라미터

Home.js

import React,{Component} from 'react';
 import { StatusBar,Button,StyleSheet,Text,View} from 'react-native';
 import {styles} from "../styles/stylesheet";

 class Home extends Component{
    constructor(props){
        super(props);
        this.state={
            name:"jiyun",
            age:23,
        }
    }
    render(){
        return(
        <View style={styles.container}>    
            <View style={styles.container1}>
            <Text style={styles.text}>Welcom to Jiyumi Project !</Text>
             <Button title="상세보기" color="gray" onPress={()=>this.goHomeSreen() } />
            <StatusBar style="light" />
            </View>
        </View> 
        )
    }
    goHomeSreen(){
        this.props.navigation.navigate('GetGoods',  {name:this.state.name, age:this.state.age});
    }
}
export default Home;

 

Home에서 두번째 파라미터에 객체를 전달하여 Getgoods화면에 이름과 나이의 값도 함께 전달할 수 있다 

 

 

Getgoods.js

import React,{Component} from 'react';
import { StatusBar,Button,StyleSheet,Text,View} from 'react-native';
import {styles} from "../styles/stylesheet";

class GetGoods extends Component{
    constructor(props){
        super(props);

        this.state={
            name:null,
            age:null,
        }
    }
    render(){
    return(
       <View style={styles.container}>
          <View style={styles.container2}>
          <Text style={styles.text}>Hi my name is {this.props.route.params.name}</Text>
          </View>

          <View style={styles.container3}>
          <Text style={styles.text}>My age is {this.props.route.params.age}</Text>
          </View>
      </View> 
        )
    }
}
export default GetGoods;

 

전달된 내용은 props로 전달되는 route의 params으로 받을 수 있다 

그러면 위의 화면과 똑같이 나오게 된다

 

 

---

Tab 내비게이션

✅ Tab 내비게이션 라이브러리 설치

npm install @react-navigation/bottom-tabs

 

App.js

import { NavigationContainer} from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Home from "./src/components/Home";
import GetGoods from "./src/components/GetGoods";
import PutGoods from "./src/components/PutGoods";
import MyPage from "./src/components/MyPage";
const Tab=createBottomTabNavigator();


 class App extends Component{
  render(){
    return (
      
      <NavigationContainer>
        <Tab.Navigator initialRouteName="GetGoods">
             
              <Tab.Screen name="GetGoods" component={GetGoods}
                             options={({route})=>({title: "상품보기"})}/>
               <Tab.Screen name="PutGoods" component={PutGoods}
                              options={({route})=>({title: "상품등록" })}/>
              <Tab.Screen name="Mypage" component={MyPage}
                             options={({route})=>({title: "내정보"})}/>
                           
         </Tab.Navigator>
        </NavigationContainer>
        );
  }
}
 export default App;

• createBottomTabNavigator : 네비게이션 bottom에 사용할 기본 틀 제공  - Screen(화면요소 설정) Navigator (스택 생성)

 

실행화면

 

 

Stack 과  Bottom Tab 함께 사용하기

Tab으로 들어간 화면에서 Stack으로 쌓인 화면 즉, 탭이 없는 화면도 보여주고 싶을 때는 동시에 사용해야한다

구조를 그려보면 Stack안에 Tab이 있다고 보면 된다

전체적인 틀을 Stack으로 감싸기 때문에 app.js에 넣어준다

 

App.js

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Home from "./src/components/Home";
import MyPage from './src/components/MyPage';
const Stack=createNativeStackNavigator();

 class App extends Component{
  render(){
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home"
                screenOptions={{
                animationEnabled:false,
                headerShown:false}
          }>
             <Stack.Screen name="Home" component={Home} />
             <Stack.Screen name="MyPage" component={MyPage}/>
         </Stack.Navigator>
        </NavigationContainer>
        );
  }
}
 export default App;

* headerShown를 false로 해서 Stack 헤더는 안보이게 함으로써 Tab 헤더랑 겹치지 않도록 함

 

 

Home.js

import GetGoods from './GetGoods';
import PutGoods from './PutGoods';
const Tab=createBottomTabNavigator();

 class Home extends Component{
    render(){
      return (
        <Tab.Navigator
            screenOptions={{
              headerShown: true
            }}
          >
          <Tab.Screen name='GetGoods' component={GetGoods}/>
          <Tab.Screen name='PutGoods' component={PutGoods}/>
      </Tab.Navigator>
      );
    }
}
export default Home;

 

실행화면