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);