728x90
반응형
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
728x90
반응형
'React Native' 카테고리의 다른 글
React Native ToastAndroid (0) | 2020.01.17 |
---|---|
React native ViewPager 사용하기 (0) | 2020.01.17 |
AppRegistry.registerComponent(앱이름, ()=>시작컴포넌트) (0) | 2020.01.17 |
[React] 컴포넌트에 props 전달 방법 (0) | 2020.01.17 |
React native 키보드 내리기 (0) | 2020.01.16 |