내비게이션 만들기 #2

다음으로 버튼을 만들어 보겠습니다.

Redshop Theme 옆으로  왼쪽에는 navigation 오른쪽에는 wishilist와 shopping cart

startSingleScreenApp screen title아래에 아래 코드 추가합니다.

[code]

  screen: {

    screen: 'react-native-navigation-bootstrap',

    title: 'Redshop Theme',

    navigatorButtons: {

      leftButtons: [{

        title: 'Navi',

        id: 'navi'

      }],

      rightButtons: [

        {

          title: 'Shop',

          id: 'shop'

        },

        {

          title: 'Wish',

          id: 'wish'

        }

      ]

    },

[/code]

다음으로 필요한 것은 상단 버튼에 대한 이벤트를 넣어야 겠죠..

index.ios.js의 풀코드입니다.

consructor와 onNavigatorEvent 함수를 추가하고,  아래 drawer가 gesture에 안 열리도록 했습니다.

[code]

/**

 * Sample React Native App

 * https://github.com/facebook/react-native

 * @flow

 */

import React, { Component } from 'react';

import {

  AppRegistry,

  StyleSheet,

  Text,

  Alert,

  View

} from 'react-native';

import { Navigation } from 'react-native-navigation';

import { registerScreens } from './screens';

registerScreens();

class react_native_navigation_bootstrap extends Component {

  constructor(props) {

    super(props);

    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));

  }

  onNavigatorEvent(event) {

    if (event.id === 'navi') {

      this.props.navigator.toggleDrawer({

        slide: 'left',

        animated: true

      });

    }

    if(event.id === 'shop') {

      Alert.alert('NavBar', 'Shop button pressed');

    }

    if(event.id === 'wish') {

      Alert.alert('NavBar', 'Wish button pressed');

    }

  }

  render() {

    return (

      <View style={styles.container}>

        <Text style={styles.welcome}>

          Welcome to React Native!

        </Text>

        <Text style={styles.instructions}>

          To get started, edit index.ios.js

        </Text>

        <Text style={styles.instructions}>

          Press Cmd+R to reload,{'\n'}

          Cmd+D or shake for dev menu

        </Text>

      </View>

    );

  }

} 

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#F5FCFF',

  },

  welcome: {

    fontSize: 20,

    textAlign: 'center',

    margin: 10,

  },

  instructions: {

    textAlign: 'center',

    color: '#333333',

    marginBottom: 5,

  },

});

Navigation.registerComponent('react-native-navigation-bootstrap', () => react_native_navigation_bootstrap);

Navigation.startSingleScreenApp({

  screen: {

    screen: 'react-native-navigation-bootstrap',

    title: 'Redshop Theme',

    navigatorButtons: {

      leftButtons: [{

        title: 'Navi',

        id: 'navi'

      }],

      rightButtons: [

        {

          title: 'Shop',

          id: 'shop'

        },

        {

          title: 'Wish',

          id: 'wish'

        }

      ]

    },

    navigatorStyles: {

      navBarTextColor: '#ffff00',

      navBarButtonColor: '#ffffff'

    },

  },

  drawer: {

    left: {

      screen: 'redshop.SideMenu'

    },

    disableOpenGesture: true

  }

});

[/code]

다음은 Wish/Shop버튼에 대한 페이지를 추가해야 겠죠.. 

SideMenu.js를 ShoppingCartScreen.js와 WishlistScreen.js로 카피하고

[code]

/**

 * Sample React Native App

 * https://github.com/facebook/react-native

 * @flow

 */

import React, { Component } from 'react';

import {

  AppRegistry,

  StyleSheet,

  Text,

  Alert,

  View

} from 'react-native';

import { Navigation } from 'react-native-navigation';

import { registerScreens } from './screens';

registerScreens();

class react_native_navigation_bootstrap extends Component {

  constructor(props) {

    super(props);

    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));

  }

  onNavigatorEvent(event) {

    if (event.id === 'navi') {

      this.props.navigator.toggleDrawer({

        slide: 'left',

        animated: true

      });

    }

    if(event.id === 'shop') {

      this.onShopPushPress();

    }

    if(event.id === 'wish') {

      this.onWishPushPress();

    }

  }

  render() {

    return (

      <View style={styles.container}>

        <Text style={styles.welcome}>

          Welcome to React Native!

        </Text>

        <Text style={styles.instructions}>

          To get started, edit index.ios.js

        </Text>

        <Text style={styles.instructions}>

          Press Cmd+R to reload,{'\n'}

          Cmd+D or shake for dev menu

        </Text>

      </View>

    );

  }

  onShopPushPress() {

    this.props.navigator.push({

      title: "ShoppingCart",

      screen: "redshop.ShoppingCartScreen",

      animated: true

    });

  }

  onWishPushPress() {

    this.props.navigator.push({

      title: "Wishlist",

      screen: "redshop.WishlistScreen"

    });

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#F5FCFF',

  },

  welcome: {

    fontSize: 20,

    textAlign: 'center',

    margin: 10,

  },

  instructions: {

    textAlign: 'center',

    color: '#333333',

    marginBottom: 5,

  },

});

Navigation.registerComponent('react-native-navigation-bootstrap', () => react_native_navigation_bootstrap);

Navigation.startSingleScreenApp({

  screen: {

    screen: 'react-native-navigation-bootstrap',

    title: 'Redshop Theme',

    navigatorButtons: {

      leftButtons: [{

        title: 'Navi',

        id: 'navi'

      }],

      rightButtons: [

        {

          title: 'Shop',

          id: 'shop'

        },

        {

          title: 'Wish',

          id: 'wish'

        }

      ]

    },

    navigatorStyles: {

      navBarTextColor: '#ffff00',

      navBarButtonColor: '#ffffff'

    },

  },

  drawer: {

    left: {

      screen: 'redshop.SideMenu'

    },

    disableOpenGesture: true

  }

});

[/code]

Shop을 눌렀을 때 나오는 화면입니다.

사이드 메뉴를 넣어 보시죠.. SideMenu.js를 수정해 보시면

[code]

import React, { Component } from 'react';

import {

  StyleSheet,

  Text,

  View,

  ScrollView,

  TouchableOpacity,

  AlertIOS

} from 'react-native';

export default class SideMenuScreen extends Component {

  constructor(props) {

    super(props)

  }

  render() {

    return (

      <View style={styles.container}>

        <Text style={styles.title}>Redshop Theme</Text>

        <TouchableOpacity onPress={this.onCategoryPress.bind(this)}>

          <Text style={styles.button}>로고인</Text>

        </TouchableOpacity>

        <TouchableOpacity onPress={this.onCategoryPress.bind(this)}>

          <Text style={styles.button}>메뉴1</Text>

        </TouchableOpacity>

        <TouchableOpacity onPress={this.onCategoryPress.bind(this)}>

          <Text style={styles.button}>메뉴2</Text>

        </TouchableOpacity>

        <TouchableOpacity onPress={this.onCategoryPress.bind(this)}>

          <Text style={styles.button}>메뉴3</Text>

        </TouchableOpacity>

        <TouchableOpacity onPress={this.onCategoryPress.bind(this)}>

          <Text style={styles.button}>메뉴4</Text>

        </TouchableOpacity>

        <TouchableOpacity onPress={this.onCategoryPress.bind(this)}>

          <Text style={styles.button}>메뉴5</Text>

        </TouchableOpacity>

        <TouchableOpacity onPress={this.onCategoryPress.bind(this)}>

          <Text style={styles.button}>쿠폰존</Text>

        </TouchableOpacity>

        <TouchableOpacity onPress={this.onCategoryPress.bind(this)}>

          <Text style={styles.button}>게시판</Text>

        </TouchableOpacity>

        <TouchableOpacity onPress={this.onCategoryPress.bind(this)}>

          <Text style={styles.button}>설정</Text>

        </TouchableOpacity>

      </View>

    );

  }

  onCategoryPress() {

    this._toggleDrawer();

    this.props.navigator.handleDeepLink({

      link: "redshop.CategoryScreen"

    });

  }

  _toggleDrawer() {

    this.props.navigator.toggleDrawer({

      to: 'closed',

      side: 'left',

      animated: true

    })

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#F5FCFF',

  },

  welcome: {

    fontSize: 20,

    textAlign: 'center',

    margin: 10,

  },

  instructions: {

    textAlign: 'center',

    color: '#333333',

    marginBottom: 5,

  },

});

[/code]

로고인이 아니라 로그인입니다.