React Native商城项目实战08 - 设置“More”界面cell
2023-09-11 14:15:30 时间
1.自定义可复用的cell
More/CommonCell.js:
/** * 自定义可复用的cell */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, TouchableOpacity, Platform, Switch } from 'react-native'; // ES5 var CommonCell = React.createClass({ getDefaultProps(){ return{ title:'', // cell标题文字 isSwitch:false, // 是否展示开关 rightTitle:'', //cell右侧标题 } }, getInitialState(){ return{ isOn:false, } }, render() { return ( <TouchableOpacity onPress={()=>{alert('点击了')}}> <View style={styles.container}> <Text>{this.props.title}</Text> {this.renderRightView()} </View> </TouchableOpacity> ); }, // cell右侧指示图标视图 renderRightView(){ if(this.props.isSwitch){ return( <Switch value={this.state.isOn == true} onValueChange={()=>{this.setState({isOn:!this.state.isOn})}} /> ) }else{ return( <View style={{flexDirection:'row',alignItems:'center'}}> {this.renderRightTitle()} <Image source={{uri:'icon_cell_rightArrow'}} style={{width:8,height:13}} /> </View> ) } }, // cell右侧标题视图 renderRightTitle(){ if(this.props.rightTitle.length > 0){ return( <Text style={{color:'gray',marginRight:10}}>{this.props.rightTitle}</Text> ) } }, }); const styles = StyleSheet.create({ container: { backgroundColor: 'white', height:Platform.OS == 'ios' ? 40 : 30, borderBottomColor:'#ddd', borderBottomWidth:0.5, flexDirection:'row', justifyContent:'space-between', // 垂直居中 alignItems:'center', paddingLeft:10, paddingRight:10, }, }); // 输出 module.exports = CommonCell;
2.在More.js里使用cell:
/** * 更多 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, TouchableOpacity, Platform, ScrollView } from 'react-native'; /*======导入外部组件类======*/ var CommonCell = require('./CommonCell'); // ES5 var More = React.createClass({ render() { return ( <View style={styles.container}> {/*导航条*/} {this.renderNavBar()} <ScrollView> <View style={{marginTop:20}}> <CommonCell title="扫一扫" /> </View> <View style={{marginTop:20}}> <CommonCell title="省流量模式" isSwitch={true} /> <CommonCell title="扫一扫" /> <CommonCell title="扫一扫" /> <CommonCell title="扫一扫" /> <CommonCell title="清空缓存" rightTitle="1.99M" /> </View> <View style={{marginTop:20}}> <CommonCell title="省流量模式" isSwitch={true} /> <CommonCell title="扫一扫" /> <CommonCell title="扫一扫" /> <CommonCell title="扫一扫" /> <CommonCell title="扫一扫" /> </View> </ScrollView> </View> ); }, // 导航条 renderNavBar(){ return( <View style={styles.navOutViewStyle}> <Text style={{color:'white',fontSize:16,fontWeight:'bold'}}>更多</Text> <TouchableOpacity onPress={()=>{alert('点击了')}} style={styles.rightViewStyle}> <Image source={{uri:'icon_mine_setting'}} style={styles.navImgStyle} /> </TouchableOpacity> </View> ) } }); const styles = StyleSheet.create({ // 导航条视图 navOutViewStyle:{ height:Platform.OS === 'ios' ? 64 : 44, backgroundColor:'rgba(255,96,0,1)', // 主轴方向 flexDirection:'row', // 侧轴对齐方式 垂直居中 alignItems:'center', // 主轴方向居中 justifyContent:'center', }, // 导航栏右侧 rightViewStyle:{ // 绝对定位 position:'absolute', right:10, bottom:15, }, // 导航条上图片 navImgStyle:{ 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 = More;
3.效果图
相关文章
- react 项目里 实现图片剪裁
- Flutter移动电商实战 --(2)建立项目和编写入口文件
- react 项目实战(七)用户编辑与删除
- React Native商城项目实战16 - 购物中心详细页
- React Native商城项目实战10 - 个人中心中间内容设置
- React Native商城项目实战07 - 设置“More”界面导航条
- 淘东电商项目(73) -秒杀系统(前端优化)
- C++第12周项目1——重温星号图
- Idea编译项目报错Error:Kotlin: Module was compiled with an incompatible version of Kotlin.
- React vscode 创建 react 项目流程
- eclipse构建maven的web项目
- django之创建第7-2个项目-url配置分离
- 如何在React Native项目中集成华为远程配置服务
- React Native项目实战之fetch请求
- React学习笔记 -- 组件通信之路由传参(react-router-dom)
- 基于Ant Design UI框架的React项目
- Qt编写的项目作品13-机房安全作业预警系统
- React高级篇(一)从Flux到Redux,react-redux
- 一、React项目骨架搭建
- react项目Bug:组件销毁清除监听(Can't perform a React state update on an unmounted component.)
- 国家电网公司大数据平台一期项目通过验收
- React实践:Vite创建React项目、react事件传递参数的两种方式
- flutter项目如何打包(android)
- 【React Native开发】React Native移植原生Android项目(4)
- Windows Insider项目成员现可体验新版Office Hub
- react脚手架创建项目报错