React Native商城项目实战05 - 设置首页的导航条
2023-09-11 14:15:30 时间
1.Home.js
/** * 首页 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableOpacity, TextInput, Image, Platform } from 'react-native'; var Dimensions = require('Dimensions'); var screenW = Dimensions.get('window').width; var screenH = Dimensions.get('window').height; /*======导入外部组件类======*/ var HomeDetail = require('./HomeDetail'); // ES5 var Home = React.createClass({ render() { return ( <View style={styles.container}> {/*首页的导航条*/} {this.renderNavBar()} <TouchableOpacity onPress={()=>{this.pushToDetail()}} > <Text style={styles.welcome}> Home </Text> </TouchableOpacity> </View> ); }, // 首页的导航条 renderNavBar(){ return( <View style={styles.navBarStyle}> <TouchableOpacity onPress={()=>{this.pushToDetail()}} > <Text style={styles.leftTitleStyle}>宁波</Text> </TouchableOpacity> <TextInput placeholder="输入商家,品类,商圈" style={styles.topInputStyle} /> <View style={styles.rightNavViewStyle}> <TouchableOpacity onPress={()=>{alert('点击了')}} > <Image source={{uri:'icon_homepage_message'}} style={styles.navRightImgStyle} /> </TouchableOpacity> <TouchableOpacity onPress={()=>{alert('点击了')}} > <Image source={{uri:'icon_homepage_scan'}} style={styles.navRightImgStyle} /> </TouchableOpacity> </View> </View> ) }, // 跳转到首页详细页 pushToDetail(){ this.props.navigator.push({ component:HomeDetail, // 要跳转过去的组件 title:'首页详细页' }); } }); const styles = StyleSheet.create({ // 导航栏 navBarStyle:{ height:Platform.OS === 'ios' ? 64 : 44, backgroundColor:'rgba(255,96,0,1)', // 主轴方向 flexDirection:'row', // 侧轴对齐方式 垂直居中 alignItems:'center', // 主轴对齐方式 justifyContent:'space-around', // 平均分布 }, // 导航条左侧文字 leftTitleStyle:{ color:'white', }, // 导航栏输入框 topInputStyle:{ width:screenW * 0.71, height:Platform.OS === 'ios' ? 35 : 30, backgroundColor:'white', marginTop:Platform.OS === 'ios' ? 18 : 0, // 圆角 borderRadius:18, paddingLeft:10, }, // 导航条右侧视图 rightNavViewStyle:{ flexDirection:'row', height:64, // 侧轴对齐方式 alignItems:'center', // backgroundColor:'blue', }, // 导航栏右侧图片 navRightImgStyle:{ width:Platform.OS === 'ios' ? 28 : 24, height:Platform.OS === 'ios' ? 28 : 24, }, container: { flex: 1, backgroundColor: '#e8e8e8', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, }); // 输出 module.exports = Home;
2.效果图
相关文章
- Eclipse创建一个JAVA WEB项目
- [React Testing] Test react-router-dom Router Provider with createMemoryHistory
- [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime
- React Native学习笔记(1) 环境配置,项目结构,开发环境结构
- [React Testing] Test Drive Mocking react-router’s Redirect Component on a Form Submission
- [React Testing] Test react-router-dom Router Provider with createMemoryHistory
- [React Intl] Use a react-intl Higher Order Component to format messages
- [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
- [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative
- React Native学习笔记(1) 环境配置,项目结构,开发环境结构
- 项目实战中react性能优化总结
- kbone 基础 - [06] Kbone + React 项目手工搭建流程
- React的source code init时会自动检测Chrome dev tool的react extension装了没
- [BI项目记]-搭建代码管理环境之服务端
- Atitit 项目管理优化体系图 第4章 项目整合管理 开始 计划 执行 监控 变更 结束 第5章 项目范围管理 SOW工作说明书 成员通讯录 wbs大概模块级别 第6章 项目时间
- 关于 Angular 项目里的 index.ts
- DayDayUp:计算机技术与软件专业技术资格证书之《系统集成项目管理工程师》课程讲解之十大知识领域之4辅助—项目沟通管理
- DayDayUp:计算机技术与软件专业技术资格证书之《系统集成项目管理工程师》课程讲解之十大知识领域之1个干系人—项目干系人管理
- 【项目实战】Spring Boot 支持的 Json 库
- Vue项目打包部署Nginx配置及前端缓存问题解决
- React(一)react概述、组件、事件
- 【项目实战】商城中基于MyBatis-Plus多租户功能逻辑设计