React Native에서 Android Drawer 레이아웃 사용

index.js

 

import React,{Component} from 'react'
import {AppRegistry,DrawerLayoutAndroid,Button,View, TouchableWithoutFeedbackBase} from 'react-native'

import App from './app/App';
import Menu from './app/Menu';
import {name as appName} from './app.json';


/* 
    기본 페이지를 'Home'으로 만들어 놓은
    드로어 레이아웃을 루트로 랜더링 한다. 

 */
class mycomponent extends Component{
    constructor(){
        super()
        this.state = {
            scene : 'Home'
        }

        this.jump = this.jump.bind(this)
        this.openDrawer = this.openDrawer.bind(this)

    }

    openDrawer() {
        this.drawer.openDrawer()
    }


    jump(scene){
        this.setState({
            scene
        })

        this.drawer.closeDrawer()
    }


    render(){
        console.log('인덱스')
        return(
            <DrawerLayoutAndroid
                ref = {drawer =>this.drawer = drawer}
                drawerWidth = {300}
                drawerPosition={DrawerLayoutAndroid.positions.Left}
                renderNavigationView = {()=> <Menu onPress={this.jump}/>}
            >
                <View style = {{margin:15}}>

                    <Button onPress = {() => this.openDrawer()} title ='Open Drawer'/>
                </View>

                <App
                    openDrawer = {this.openDrawer}
                    jump = {this.jump}
                    scene = {this.state.scene}
                />

            </DrawerLayoutAndroid>

        )
    }
}

AppRegistry.registerComponent(appName, () => mycomponent);

 

App.js

import React from 'react'
import Home from './Home'
import Toolbar from './Toolbar'


function getScene (scene){
    switch(scene) {
        case 'Hoem' :
            return Home
        
        case 'Toolbar' :
            return Toolbar

        default :
            return Home
    }
}

const App = (props) => {
    const Scene =getScene(props.scene)
    console.log('App')

    return(
        
        <Scene openDrawer = {props.openDrawer} jump={props.jump}/>
    )
}

export default App

Home.js

//11.4
import React, { Component } from 'react'
import {
  View,
  Text,
  StyleSheet
} from 'react-native'

let styles

class Home extends Component {
  render () {
    console.log('홈')

    return (
      <View style={styles.container}>
        <Text style={styles.text}>
          Hello, this is an example application showing off some
          android-specific APIs and Components!
        </Text>
      </View>
    )
  }
}
styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    margin: 20,
    textAlign: 'center',
    fontSize: 18
  }
})

export default Home

 

Menu.js

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

let styles

/* 
    드로어 레이아웃 메뉴 페이지다. 
 */
const Menu  = ({onPress}) =>{

    const {
        button
    } = styles

    console.log('메뉴')

    return(


        <View style = {{flex:1}}>
            <View style ={button}>
                <Button onPress={()=> onPress('Home')} title ='Home으로'/>
            </View>

            <View style ={button}>
                <Button onPress={()=> onPress('Toolbar')} title ='툴바 Android'/>
            </View>

        </View>

    )

}

styles = StyleSheet.create({

    button: {
        margin:10,
        marginBottom:0
    }
})

export default Menu

Toolbar.js

 

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

class ToolBar extends React.Component {
  render () {
    return (
      <View style={{ flex: 1 }}>
        <Text>Hello from Toolbar</Text>
      </View>
    )
  }
}
export default ToolBar