HybridApp-React Native 2세대 (Page 전환-react_navigation, 외부 라이브러리 추가 사용)

<최종화면> - Home 화면에서 버튼을 누르면 Second 화면으로 전환된다.

                  Second 화면에서 버튼을 누르면 Home 화면으로 전환된다.

---

AVD를 켜두고, cmd창에서 작업할 경로까지 접근하여 init하자.

react에서는 Page 전환이 없어서 라이브러리를 사용해야 한다.

라이브러리는 계속 바뀌고 있어서 (업데이트), 어제했던 예제가 오늘 안되곤 한다..

우선 라이브러리 관련 사이트를 들어가 보자.

 

https://reactnavigation.org/

React Navigation · Routing and navigation for your React Native apps

GUIDES를 누르자.

처음 가이드를 보면 install해야 할 것들이 설명되어 있다.

yarn, chocolatey 등등은 라이브러리를 모아두는 github같은 것이다.

 

이전에는 react-navigation, react-native-geusture-handler (총 2개)만 설치했으면 됐다.

그러나 버전이 업그레이드 되면서.. 안되는 것들이 생긴다.

 

이제는

react-navigation, react-native-geusture-handler, react-native-safe-area-context 이렇게 3개[필수]가 필요하다.

그러나 언젠가 또 필요할거 같아서 처음부터 5개를 설치할 것이다.

react-navigation

react-native-gesture-handler

react-native-reanimated

react-native-screens

react-native-safe-area-context

그리고 필요한 것은 따로 추가하자. API메뉴에 해당 쓰고자 하는 기술을 들어가서 읽어보자.

필요한 라이브러리를 설치해보자. 자신이 아까 init한 폴더 경로까지 접근하여 install하자.

명령어 :npm install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context

설치가 잘 되었다면 package.json 파일에 추가가 된 것을 알 수 있다.

추가되었다면 이제 우선 run을 먼저 해보자.

에러 없이 실행이 되었다.

Main.js 파일을 만들자.

Main.js에는 화면을 보이는 뷰가 필요가 없다. 그러나 우선 Main.js를 index.js에서 호출하는데 확인을 위해 임시로 뷰를 넣었다.

구조 Main.js에서 연결을 할것이기 때문에 우선 screens 폴더를 만들고,

거기에 두 파일(HomeScreen, SecondScreen)을 만들자.

RN11NavigationScreen폴더에 screens 폴더를 만들자.

screens폴더안에 HomeScreen.js 파일을 만들자.

HomeScreen.js

import React, {Component} from 'react';
import {View, Text} from 'react-native';
 
export default class HomeScreen extends Component{
    render(){
        return(
            <View style={{flex:1, justifyContent:'center',alignItems:'center'}}>
                <Text>HomeScreen</Text>
            </View>
        );
    }
}

screens폴더안에 SecondScreen.js 파일을 만들자.

SecondScreen.js

import React, {Component} from 'react';
import {View, Text} from 'react-native';
 
export default class SecondScreen extends Component{
    render(){
        return(
            <View style={{flex:1, justifyContent:'center',alignItems:'center'}}>
                <Text>SecondScreen</Text>
            </View>
        );
    }
}

이제 StackNavigator를 추가해보자. 해당 사이트에 보면 명령어가 나와있다. 현재 환경은 yarn이 없으므로

npm으로 설치 하겠다.

우선 실행하고 있던 앱을 종료하자. cmd창에 추가 명령어를 써야 한다.

명령어:npm install react-navigation-stack @react-native-community/masked-view

설치가 잘됐다면 아래 사진처럼 추가된 것을 알 수 있다.

이제 Main.js 코드를 변경하자. Main엔 뷰가 없고 StackNavigator객체를 생성하고, 그 컴포넌트 객체만 리턴하면 된다.

Main.js

import React, {Component} from 'react';
import {View, Text} from 'react-native';
 
import {createStackNavigator} from 'react-navigation-stack';
import HomeScreen from './screens/HomeScreen';
import SecondScreen from './screens/SecondScreen';
 
import {createAppContainer} from 'react-navigation';
 
// StackNavigator 객체 생성
const stackNav= createStackNavigator(
    {
        Home: {screen:HomeScreen},
        Second: {screen:SecondScreen},
    }
);
 
// 네비게이터 객체를 가지고 있는 AppContainer객체 생성 : 컴포넌트 객체
const Container=createAppContainer(stackNav);
 
export default class Main extends Component{
    render(){
        return <Container theme="light"></Container>
    }
}

이제 실행을 해보자.

이제 버튼을 눌르면 화면을 이동해보자.

<실행 화면> - Home 화면에서 버튼을 누르면, Second 화면으로 이동된다.

<실행 화면> - Second 화면에서 버튼을 누르면, Home화면으로 이동된다.

툴바 모양을 설정해보자. (옵션값은 사이트에 많이 나와있다.그리고 바뀐것을 확인하기 위해선 앱종료 후 다시 run 필요.)

확인을 위해 앱을 종료하고 다시 run하자.

이미지를 가진 툴바를 만들어 보자. 이전 navigationOptions는 주석처리하자.

확인을 위해 앱을 종료하고 다시 run하자.

이미지를 넣기위해 RN11NavigationScreen폴더 안에 images 폴더를 만들자.

images 폴더 안에 임의의 이미지를 추가 하자.

 

확인을 위해 앱을 종료하고 다시 run하자.

 

툴바를 없앨 수도 있다. Main.js에서 쉽게 적용 가능하다.

---

<복붙용 코드>

Main.js

import React, {Component} from 'react';
import {View, Text} from 'react-native';
 
import {createStackNavigator} from 'react-navigation-stack';
import HomeScreen from './screens/HomeScreen';
import SecondScreen from './screens/SecondScreen';
 
import {createAppContainer} from 'react-navigation';
 
// StackNavigator 객체 생성
const stackNav= createStackNavigator(
    {
        // Home: {screen:HomeScreen, navigationOptions:{header:null}},
        Home: {screen:HomeScreen},
        Second: {screen:SecondScreen},
       
    }
);
 
// 네비게이터 객체를 가지고 있는 AppContainer객체 생성 : 컴포넌트 객체
const Container=createAppContainer(stackNav);
 
export default class Main extends Component{
    render(){
        return <Container theme="light"></Container>
    }
}

Home.js

import React, {Component} from 'react';
import {View, Text, Button, Image} from 'react-native';
 
class LogoTitle extends Component{
    render(){
        return(
            <View style={{flexDirection:'row', padding:8, alignItems:'center'}}>
                <Image style={{width:30, height:30}} source={require('../images/ms21.png')}></Image>
                <Text style={{color:'white', fontWeight:'bold',fontSize:24, marginLeft:16}}>Home</Text>
            </View>
        );
    }
}
 
export default class HomeScreen extends Component{
 
    // 툴바 모양 설정하기
    // 특별한 static 변수를 지정하면 됨 - 이 옵션 값은 다시 run해야만 적용됨
    // static navigationOptions={
    //     title: "HomeScreen",
    //     headerStyle:{
    //         backgroundColor:'#f4511e', //헤더바 배경색
    //     },
    //     headerTintColor:'#fff', //헤더 글씨 색상
    //     headerTitleStyle:{
    //         fontWeight:'bold',
    //     },
    // }
 
    // 툴바를 없애고 싶다면
    // static navigationOptions={header:null}
 
    // 이미지를 가진 헤더 만들기
    static navigationOptions={
        headerTitle: ()=><LogoTitle></LogoTitle>, // 이거를 줄임 ()=>{return <LogoTitle></LogoTitle>}
        headerStyle:{ backgroundColor:'green'},
        title:"aaaaa", //이건 무시됨
    }
 
    render(){
        return(
            <View style={{flex:1, justifyContent:'center',alignItems:'center'}}>
                <Text>HomeScreen</Text>
                <Button onPress={this.gotoSecond} title="Go to the Second screen"></Button>
            </View>
        );
    }
    gotoSecond=()=>{
        // 네비게이터에 의해 보여지는 컴포넌트들은 자동으로
        // this.props 변수 안에 navigation이라는 객체가 전달됨
        this.props.navigation.navigate('Second')
    }
}

SecondScreen.js

import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';
 
export default class SecondScreen extends Component{
    render(){
        return(
            <View style={{flex:1, justifyContent:'center',alignItems:'center'}}>
                <Text>SecondScreen</Text>
                <Button color='indigo' onPress={()=>{this.props.navigation.navigate('Home')}}  title="Go back"></Button>
            </View>
        );
    }
}