react-native 导航栏

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';


var React = require('react-native');
var Image = require('Image');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;


var test1 = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <View style={styles.main}>
          <Text style={{marginTop:40,fontSize:25}}>主显示区域</Text>
        </View>
        <View style={styles.nav}>
          <View style={styles.nav_item}>
<Image source={require('./images/1.png')}/>
<Text style={styles.nav_item_text}>首页</Text>
 </View>
 <View style={styles.nav_item}>
<Image source={require('./images/2.png')}/>
<Text style={styles.nav_item_text}>办税指南</Text>
 </View>
 <View style={styles.nav_item}>
<Image source={require('./images/3.png')}/>
<Text style={styles.nav_item_text}>办税服务</Text>
 </View>
 <View style={styles.nav_item}>
<Image source={require('./images/4.png')}/>
<Text style={styles.nav_item_text}>办税咨询</Text>
 </View>
 <View style={styles.nav_item}>
<Image source={require('./images/5.png')}/>
<Text style={styles.nav_item_text}>我的</Text>
 </View>
        </View>
      </View>
    );
  }
});


var styles = StyleSheet.create({
  container:{
    flex:1,
marginBottom:0
  },
  main:{
    flex:9
  },
  nav:{
    flex:1,
justifyContent:'center',
alignItems:'center',
flexDirection:'row',
backgroundColor:'gray'
  },
  nav_item:{
flex:1,
justifyContent:'center',
alignItems:'center'
  },
  nav_item_text:{
fontSize:14 
  }
});


AppRegistry.registerComponent('test1', () => test1);