리액트네이티브 react-native-navigation V2 SideMenu #4

React-Native-Navigation V2 을 이용하여 SlideMenu 작성해보자. v1에서는 drawer였는데, 버전이 올라가면서 sideMenu로 변경되었다.

import {Navigation} from 'react-native-navigation';
import Welcome from './src/Welcome';
import SignIn from './src/SignIn';
import SignUp from './src/SignUp';
import SideMenu from './src/SideMenu';

 
 
Navigation.registerComponent('SideMenu', ()=>SideMenu );
Navigation.registerComponent('Welcome', ()=>Welcome );
Navigation.registerComponent('SignIn', ()=>SignIn );
Navigation.registerComponent('SignUp', ()=>SignUp );
 
Navigation.events().registerAppLaunchedListener( () => {
   
  Navigation.setRoot({
    root: {
      sideMenu: {
        left: {
          component: {
            id: "Drawer",
            name: "SideMenu",
            passProps: {
              text: 'This is a left side menu screen'
            },
            
          }
        },
        center: {
          stack : {
            id:'AppStack',
            children : [
                {
                    component : {
                        name: 'Welcome'
                    },
                }
            ]
          }
        }
      }
    }
  });
 
  
});
 
 
 

[index.js]

Navigation.setRoot root 속성 안으로 sideMenu :{... } 추가한다. 이때 center : {stack: {} ... } 속석을 반드시 지정한다. sideMenu를 설정하면 터치를 오른쪽으로해서 화면을 밀면 자동으로 sideMenu가 오픈된다. 

import React, {Component} from "react";
import {
    View,
    Text,
    StyleSheet,
    Button
} from "react-native";
import {Navigation} from "react-native-navigation";
 
class SideMenu extends Component {   
 
    render() {
 
        return (
            <View style={styles.container}>
                <Text>SideMenu</Text>
            </View>
        );
    }
}
 
 
export default SideMenu;
 
 
const styles = StyleSheet.create({
    
    container : {
        flex : 1,
        alignItems: 'center',
        justifyContent : 'center'
    }
});

[SideMenu.js]

SideMenu 컴포넌트는 간단하게 작성한다.

import React, { Component } from "react";
import { View, Text, StyleSheet, Button } from "react-native";
import { Navigation } from "react-native-navigation";
 
 
class WelcomScreen extends Component {
 
 
    static get options() {
        return {
            topBar: {
                visible: true,
                translucent: true,
                background: {
                    color: "rgba(217, 73, 114, 0.5)",
                    
                },
                leftButtons: {
                    id: 'menuButton',
                    icon: require('../image/icons-menu-25.png')
                }                    
                
            }
        };
    }
 
    constructor(props) {
        super(props);
        this.state = {
            openFlag : false
        }
        Navigation.events().bindComponent(this);
        
    }
      
 
 
    navigationButtonPressed({ buttonId }) {
        
        this.state.openFlag = !this.state.openFlag;
        if (buttonId == 'menuButton') {
            Navigation.mergeOptions('Drawer', {
              sideMenu: {
                left: {
                  visible:this.state.openFlag , 
                },
              },
            });
            
        }
        
    }
 
 
    goToScreen = (screenName) => {
        Navigation.push(this.props.componentId, {
            component: {
                name: screenName
            }
        })
    }
 
    render() {
 
        return (
            <View style={styles.container}>
                <Button title='Sign In' onPress={() => this.goToScreen('SignIn')} />
                <Button title='Sign Up' onPress={() => this.goToScreen('SignUp')} />
            </View>
        );
    }
}
 
export default WelcomScreen;
 
const styles = StyleSheet.create({
 
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

[Welcome.js]

static get options 함수를 이용하여 topBar에 관한 설정을 추가하고, leftButton 항목에 버튼이미지및 id를 설정한다. leftButton에 대한 이벤트를 사용하기위해서 생성자함수에 Navigation.events().bindComponent(this); 추가하고

navigationButtonPressed({ buttonId }) {..} 이벤트 발생에 대한 코드를 추가한다.

leftButton선택시 sideMenu를 open 시키기위해서 sideMenu 상태를 재정의 해야된다. 이때 사용되는 메서드가 Navigation.mergeOptions 이다.

참고 URL

https://wix.github.io/react-native-navigation/#/docs/layout-types?id=sidemenu

https://wix.github.io/react-native-navigation/#/docs/topBar-buttons

관련 포스팅 보기 

react-native-navigation v2 개발환경 설정 (ios) #1

react-native-navigation v2 Root Screen #2

react-native-navigation V2 StackNavigator #3