## 简介
这是一个使用React Native开发,支持Android和iOS双平台的app,使用ts的语法,严格的类型检查和完整的提示使开发更快更便捷。集成微信sdk,方便调用微信登录,支付及分享, 使用codepush进行热更新,只要是js代码及静态文件(图片)的更新都无需下载新版本即可更新。
## 安装运行(运行前请确保安装了相关环境: https://reactnative.cn/docs/getting-started)
在根目录下运行 npm install 或者 yarn 安装依赖
运行前请删除node_modules/react-native-scrollable-tab-view/node_modules
不然会导致链接js服务器失败
## ios运行
在根目录下运行npx pod-install 或cd ios => pod install 安装iOS依赖
打开ios目录下.xcworkspace文件在Xcode中选择模拟器并运行
命令行运行: 根目录下运行yarn ios
## 安卓运行
使用Android Studio打开android目录 打开后会自动同步安卓依赖,同步完依赖后选择模拟器并运行
安卓运行前要执行yarn start 打开js服务器
命令行运行: 根目录下运行 yarn android
## 安卓打包apk
cd android
./gradlew assembleRelease
详细教程请前往 (https://reactnative.cn/docs/signed-apk-android)
## RN打包,上传codepush更新
codepush接入流程:
https://www.jianshu.com/p/6a5e00d22723
如果项目根目录没有 bundle/ios, bundle/android 请先创建
## Android
打包静态文件命令
yarn bundle-android
上传codepush更新命令
生产环境
code-push release-react likemall_android android --t 1.0.0 --dev false --d Production --des "细节优化" --m true (强制更新)
开发环境
code-push release-react likemall_android android --t 1.0.0 --dev false --d Staging --des "细节优化" --m true (强制更新)
## iOS
打包静态文件命令
yarn bundle-ios
上传codepush更新命令
生产环境
code-push release-react likemall_ios ios --t 1.0.1 --dev false --d Production --des "修复bug" --m true (强制更新)
开发环境
code-push release-react likemall_ios ios --t 1.0.0 --dev false --d Staging --des "修复bug" --m true (强制更新)
##添加图片
1.编辑好图片丢到resources里面
2.到项目根目录下,运行./build_image.sh
## 目录结构
初始的目录结构如下:
├─likemall 根目录
│ ├─android Android项目目录, 包含了使用AndroidStudio开发项目的环境配置文件
│ ├─ios iOS项目目录,包含了XCode的环境
│ ├─resource 图片资源目录
│ ├─src 开发目录
│ │ ├─api 接口文件目录
│ │ ├─components 组件目录
│ │ │ ├─bussiness 业务逻辑组件目录
│ │ │ │ ├─ActiveArea.tsx 首页活动区域组件
│ │ │ │ ├─AddressItem.tsx 地址区域组件
│ │ │ │ ├─AdSwiper.tsx 广告位组件
│ │ │ │ ├─CheckBox.tsx 复选框组件
│ │ │ │ ├─CouponItem.tsx 优惠券列表项组件
│ │ │ │ ├─CouponPopItem.tsx 下单选择优惠券列表项组件
│ │ │ │ ├─EmptyView.tsx 空页面组件
│ │ │ │ ├─GoodsItem.tsx 商品列表项组件
│ │ │ │ ├─GoodsSpec.tsx 商品规格弹窗组件
│ │ │ │ ├─HomeCoupon.tsx 首页优惠券组件
│ │ │ │ ├─OrderGoods.tsx 订单商品列表组件
│ │ │ │ ├─PriceFormate.tsx 价格分割组件
│ │ │ │ ├─Progress.tsx 滚动条组件
│ │ │ │ ├─Recommend.tsx 推荐商品组件
│ │ │ │ └─UploadProfile.tsx 图片上传组件
│ │ │ │
│ │ │ ├─main 通用型组件目录
│ │ │ │ ├─AddressPicker.tsx 地址选择器组件
│ │ │ │ ├─CheckUpDate.tsx 热更新检查组件
│ │ │ │ ├─CountDown.tsx 倒计时组件
│ │ │ │ ├─CustomImage.tsx 图片加载,图片自适应宽/高组件
│ │ │ │ ├─CustomTabBar.tsx 自定义TabBar, 与react-native-scrollable-tab-view搭配使用
│ │ │ │ ├─Dialog.tsx 对话框组件
│ │ │ │ ├─ImagePreview.tsx 图片预览组件
│ │ │ │ ├─LFlatList.tsx 列表组件
│ │ │ │ ├─LoadingView.tsx loading组件
│ │ │ │ ├─Popup.tsx 弹窗组件
│ │ │ │ ├─PressButton..tsx 按钮组件
│ │ │ │ ├─Search.tsx 搜索框组件
│ │ │ │ ├─Steppertsx 步进器组件
│ │ │ │ ├─StickyHeader.tsx 悬浮组件
│ │ │ │ ├─TabBarItem.tsx 主页面底部4个tab项组件
│ │ │ │ └─Triangle.tsx 小三角组件
│ │ │ │
│ │ │ ├─routers 路由组件目录
│ │ │ └─...
│ │ │
│ │ ├─constraint 常量目录
│ │ │ ├─Image.ts 图片常量文件
│ │ │ ├─Style.ts 样式常量文件
│ │ │ ├─Theme.ts 主题常量文件
│ │ │ └─...
│ │ │
│ │ ├─pages 页面文件目录
│ │ ├─store redux集成目录
│ │ ├─typing ts类型声明目录
│ │ │ ├─coustom.d.ts 自定义声明文件,主要用于声明js依赖模块
│ │ │ ├─index.ts navigation声明文件
│ │ │ └─routeConfig.ts 路由配置文件
│ │ │
│ │ ├─utils 工具类目录
│ │ │ ├─app.ts 设备信息相关文件
│ │ │ ├─area.ts 地址json文件
│ │ │ ├─auth.ts token相关文件
│ │ │ ├─cameraRoll.ts 相册调用文件
│ │ │ ├─imageUpload.ts 图片上传
│ │ │ ├─navigation.ts 路由跳转
│ │ │ ├─parseTime.ts 时间格式化
│ │ │ ├─request.ts 接口请求拦截
│ │ │ ├─type.ts 枚举类型
│ │ │ ├─request.ts 接口请求拦截
│ │ │ ├─util.ts 常用工具方法
│ │ │ └─wechat.ts 微信sdk相关
│ │ │
│ │ └─App.tsx 项目入口文件
│ │
│ ├─.buckconfig Buck的配置文件,buck是Facebook开源的高效构建系统
│ ├─.eslintrc.js Eslint配置文件
│ ├─.gitattributes git配置文件,指定非文本文件的对比合并方式
│ ├─.gitignore git配置文件,用于忽略你不想提交到Git上的文件
│ ├─.watchmanconfig watchman的配置文件,watchman用于监控文件变化,辅助实现工程修改信息
│ ├─app.json app的json文件
│ ├─babel.config.js Babel配置文件,在.babelrc配置文件中,主要是对预设(presets)和插件(plugins)进行配置,因此不同的转译器作用不同的配置项
│ ├─build_image.sh 生成Image.ts的脚本文件, 在根目录下运行./build_image.sh(mac)或build_image.sh(window)即可生成Image.ts
│ ├─index.js ios或android的入口文件
│ ├─metro.config.js metro配置文件
│ ├─package.json 项目基本信息以及依赖信息
│ ├─README.md README 文件
│ └─tsconfig.json ts配置文件
## 页面说明
| 页面|名称|路径|带路径例子|参数解释|
| --- | --- | --- | --- | --- |
| 首页 | Home | Home | | |
|分类 | Classify | Classify | | |
|购物车| ShopCart |ShopCart| | |
|个人中心| Mine | Mine | | |
| app启动广告页 |AdPages|AdPages| | |
| 收货地址 |UserAddress| UserAddress |{type: 1}|从下单页进入地址页需要传参|
|地址编辑/添加|AddressEdit|AddressEdit|{type: 0, id: 1}|type为0则为编辑地址,type为1则为添加地址,type为1时id不传|
|登录|Login|Login| | |
|注册账号|RegAccount|RegAccount| | |
|忘记密码|ForgetPwd|ForgetPwd| | |
|我的收藏|UserCollection|UserCollection| | |
|帮助中心/商城咨询|NewsList|NewsList|{type: 0}|type为0则为帮助中心,type为1则为商城资讯|
|用户评价列表|UserEvaluation|UserEvaluation|{active: 1}|可传也可不传,0为选中第一个tab,1为选中第二个tab|
|商品评价|GoodsReview|GoodsReview|{id: 3}|对应的订单商品id|
|店铺主页|StoreDetail|StoreDetail|{id: 1}|店铺id|
|店铺信息|StoreInfo|StoreInfo|{id: 1}|店铺id|
|全部评价|GoodsAllEvaluation|GoodsAllEvaluation|{id: 9}|商品id|
|退款/售后|PostSale|PostSale| | |
|店铺街|ShopStreet|ShopStreet| | |
|限时秒杀|SeckillActivity|SeckillActivity| | |
|领券中心|CouponCenter|CouponCenter| | |
|店铺排行|ShopRank|ShopRank| | |
|热销榜单|HotList|HotList| | |
|商品搜索|GoodsSearch|GoodsSearch|{id: 6, name: ‘华为手机’}|当点击分类进入商品搜索时,需要传分类id和分类名字|
|商品详情|GoodsDetail|GoodsDetail|{id: 8}|商品id|
|我的订单|UserOrder|UserOrder|{type: 0}|订单类型,可传可不传|
|订单详情|OrderDetails|OrderDetails|{id: 1}|订单id|
|签到|UserSign|UserSign| | |
|我的优惠券|UserCoupon|UserCoupon| | |
|售后申请|ApplyRefund|ApplyRefund|{orderId:22,itemId:33,afterSalesId: 22}|订单id,商品规格id,售后id|
|售后详情|AfterSalesDetail|AfterSalesDetail|{orderId:22,temId:33,afterSalesId: 22}|订单id,商品规格id,售后id|
|提交快递单号|AfterSalesDetailForm|AfterSalesDetailForm|{id:22}|售后id|
|文章详情|NewsDetail|NewsDetail|{id:11, type: 0 }|文章id, type为0则为帮助中心,type为1则为商城资讯|
|物流信息|Logistics|Logistics|{id:1}|订单id|
|积分明细|SignDetail|SignDetail| | |
|签到规则|SignRule|SignRule| | |
|webview|MyWebView|MyWebView|{url:https://baidu.com, name: ‘百度’}|网页链接与title,title可不传|
|支付结果|PayResult| PayResult |{id: 订单id}| |
|个人设置|UserProfile|UserProfile| | |
|修改手机号|ChangePhone|ChangePhone|{mobile:‘1354536847’}|手机号|
| 设置密码| SetPassWord|SetPassWord |{mobile:‘1354536847’}|手机号 |
| 服务协议|ServerExplain|ServerExplain|{type:0}| 0为服务协议,1为隐私政策, 2为售后保障|
|下单 |ConfirmOrder |ConfirmOrder | {type: ‘cart’, goods: \[{
Item\_id: 10, num: 1}\]| type不传默认为立即购买, 传’cart’为购物车购买,goods是一个包含规格id和商品数量的数组|