reactnative开发教程（3）

4.菜单导航

（1）我们在我们的项目中创建一个APP的文件夹里面放的就是我们需要实现界面和功能的js文件。在这里我先说一下我们要用到图标文字插件这个是需要去npm上下载的后面我会说怎么下载。

说一下菜单构建思路我们来创建一个为：首页，订单，商品，我的4个导航。我们需要有一个界面来加载这4个模块。项目我们来看一下怎么做。我们创建一个APP目录

/*!
 *

 */
var React = require('react-native');
var {
  StyleSheet,
  Text,
  View,
  Navigator,
  DrawerLayoutAndroid,
  Image,
  Dimensions,
  TouchableWithoutFeedback
  } = React;


var WINDOW_WIDTH = Dimensions.get('window').width;
var MainToolbar =  require('./maintoolbar');
//var Notice_Detail =  require('./../Notice/notice_detail');
var Icon = require('react-native-vector-icons/Ionicons');

module.exports = React.createClass({
  getInitialState: function () {
    return {
      active: 'Home',
    };
  },
  isActive(menu){
    return menu === this.state.active;
  },
  render: function(){
    //var menudata = this.props.menudata;
    //alert(menudata.length);
    return(
      <View style={styles.actionsContainer}>                          
               <TouchableWithoutFeedback 
                    underlayColor="#fff" 
                    style={{flex:1,justifyContent: 'center',alignItems:'center'}} 
                    onPress={() => this._MenuSelect('Home',0)}
                    >
                <View style={styles.actionItem}>
                <View style={styles.actionIconRow}>
                  <Icon name="ios-home" size={30} color={this.isActive('Home') ? global.Colors.activeMenuIcon: global.Colors.menuIcon} />
                </View>
                <View style={styles.actionIconRow}>
                  <Text style={{color:this.isActive('Home') ? global.Colors.activeMenuIcon: global.Colors.menuIcon}}>
                    首页
                  </Text>
                </View>
              </View>
                </TouchableWithoutFeedback>
                <TouchableWithoutFeedback 
                    underlayColor="#fff" 
                    style={{flex:1,justifyContent: 'center',alignItems:'center'}} 
                    onPress={() => this._MenuSelect('Order',1)}
                    >
                  <View style={styles.actionItem}>
                <View style={styles.actionIconRow}>
                  <Icon name="android-clipboard" size={30} color={this.isActive('Order') ? global.Colors.activeMenuIcon: global.Colors.menuIcon} />
                </View>
                <View style={styles.actionIconRow}>
                  <Text style={{color:this.isActive('Order') ? global.Colors.activeMenuIcon: global.Colors.menuIcon}}>
                    订单
                  </Text>
                </View>
              </View>
                </TouchableWithoutFeedback>
                <TouchableWithoutFeedback 
                    underlayColor="#fff" 
                    style={{flex:1,justifyContent: 'center',alignItems:'center'}} 
                    onPress={() => this._MenuSelect('Stock',2)}
                    >
                  <View style={styles.actionItem}>
                    <View style={styles.actionIconRow}>
                      <Icon name="briefcase" size={30} color={this.isActive('Stock') ? global.Colors.activeMenuIcon: global.Colors.menuIcon} />
                    </View>
                    <View style={styles.actionIconRow}>
                      <Text style={{color:this.isActive('Stock') ? global.Colors.activeMenuIcon: global.Colors.menuIcon}}>
                        商品
                      </Text>
                </View>
              </View>
                </TouchableWithoutFeedback>
                <TouchableWithoutFeedback 
                    underlayColor="#fff" 
                    style={{flex:1,justifyContent: 'center',alignItems:'center'}} 
                    onPress={() => this._MenuSelect('Mine',3)}
                    >
                  <View style={styles.actionItem}>
                <View style={styles.actionIconRow}>
                  <Icon name="person" size={30} color={this.isActive('Mine') ? global.Colors.activeMenuIcon: global.Colors.menuIcon} />
                </View>
                <View style={styles.actionIconRow}>
                  <Text style={{color:this.isActive('Mine') ? global.Colors.activeMenuIcon: global.Colors.menuIcon}}>
                    我的
                  </Text>
                </View>
              </View>
              </TouchableWithoutFeedback>

      </View> 
    );
  },
  _MenuSelect: function(id,index){
    //alert(id)
    this.setState({active:id});
    this.props.menuselect(id,index)
  }
});

var styles  = StyleSheet.create({

  actionsContainer: {
    height: 56,
    flexDirection: 'row',
    borderTopWidth:1,
    borderTopColor:'#999999',
    backgroundColor:'#008080',
    alignItems: 'center',
  },
  actionItem: {
    flex: 1,
    height: 56,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    paddingLeft: 8,
    paddingRight: 8,
    backgroundColor:'transparent',
  },
  actionIconRow:{
    flexDirection: 'row',
    alignItems: 'center',
  },
});

在代码里面我们看到了我们这里用到了icons下面我们来添加npm