多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
## 简介 这是一个使用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和商品数量的数组|