react-native 导航栏

最新推荐文章于 2025-07-16 10:43:50 发布

liuguxing

最新推荐文章于 2025-07-16 10:43:50 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： react-native

本文链接：https://blog.youkuaiyun.com/liuguxing/article/details/50633827

react-native 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用React Native创建一个简单的应用，包括组件创建、样式设置、导航栏实现及图片展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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