{"id":21561447,"url":"https://github.com/lewinjun/react-native-lewin-scaffold","last_synced_at":"2025-08-17T01:10:48.691Z","repository":{"id":39223600,"uuid":"233043679","full_name":"LewinJun/react-native-lewin-scaffold","owner":"LewinJun","description":"react native 脚手架(typescript) redux persist react-navigation5.8(封装了常规路由跳转方法)，集成了 code-push，并添加codepush更新提示框。优化connect使用,使用更方便。已有多款app store上线使用该脚手架","archived":false,"fork":false,"pushed_at":"2023-10-20T23:21:59.000Z","size":2208,"stargazers_count":28,"open_issues_count":3,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T10:47:45.892Z","etag":null,"topics":["android","codepush","dva","ios","react-hooks","react-native","react-navigation","react-redux","redux-persist"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LewinJun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-10T12:36:00.000Z","updated_at":"2024-08-12T07:07:15.000Z","dependencies_parsed_at":"2023-02-14T20:00:49.321Z","dependency_job_id":null,"html_url":"https://github.com/LewinJun/react-native-lewin-scaffold","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LewinJun%2Freact-native-lewin-scaffold","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LewinJun%2Freact-native-lewin-scaffold/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LewinJun%2Freact-native-lewin-scaffold/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LewinJun%2Freact-native-lewin-scaffold/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LewinJun","download_url":"https://codeload.github.com/LewinJun/react-native-lewin-scaffold/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248215193,"owners_count":21066622,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","codepush","dva","ios","react-hooks","react-native","react-navigation","react-redux","redux-persist"],"created_at":"2024-11-24T09:22:38.758Z","updated_at":"2025-04-10T11:53:23.040Z","avatar_url":"https://github.com/LewinJun.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"基于react native 0.63.4。react-native redux persist react-navigation code-push等集成的一款脚手架，开发新项目不用浪费前面的半天一天时间，快速开发新项目\n\n\n\n\n\u003e 目前这个脚手架市场上已有app使用\n\n1. 第一框应用享够蜂店：安卓和iOS下载安装链接  http://shareapi.yunxglife.com/download/download.html  iOS应用商店 app链接: https://apps.apple.com/cn/app/%E4%BA%AB%E5%A4%9F%E8%9C%82%E5%BA%97/id1506141299\n\u003e 分销平台，输入框很多的一个非常好的实例，包含微信支付和微信分享，原生Android+iOS+React Native+html三种混合开发,html集成了腾讯地图，RN webview加载html地图，html地图获取到经纬度等位置信息传递给RN webview\n\n2. 第二款应用TECHDEAL： https://www.techdeal.cn/mobile-download 安卓: https://techdeal.oss-cn-shanghai.aliyuncs.com/app/techdeal-1.4.apk  iOS app store： https://apps.apple.com/us/app/techdeal/id1525133677\n\u003e 技术交易所，包含高德地图，websocket IM聊天(没用第三方平台，自己写的IM聊天系统)，原生Android+iOS+React Native+React(umi)三种混合开发\n\n\n3. 第三款应用哈喽咪咪 : 安卓下载链接 https://cat-pay.oss-cn-beijing.aliyuncs.com/app/hellomimi_sign.apk iOS appstore: https://apps.apple.com/cn/app/%E5%93%88%E5%96%BD%E5%92%AA%E5%92%AA/id1547972757\n\u003e 宠物一站式上门服务，宠物社交(视频，图片)，微信和支付宝支付，本机号码一键登录，微信分享(如有人需要可以联系我，我可以提供RN集成版出来)，原生Android+iOS+React Native+React(umi)三种混合开发\n\n4. 第四款应用已开发完毕，此款和上面的三款有点不一样，第四款是原有的原生接入此RN脚手架，安卓(kotlin+java),iOS(OC+swift),接入也有一定的经验，如有兴趣可以找我聊，下载链接 https://app.doctopia.com.cn/\n\n## 热更使用的是codepush \n\n\u003e 服务器在微软国外,下载bundle包可能会比较慢，我这边有解决方案，修改codepush源码可以把bundle包放到自己的oss上，速度非常可观。以下是集成步骤，默认用的oss,如果用其它的可以自行修改打包脚本code-push-package-sync\n\n\u003e 1. 开源地址打包脚本，package.json\n\ndevDependencies\n\"code-push-package-sync\": \"git+https://gitee.com/Lewin_Li/code-push-package-sync.git#v1.1.0\",\n\njs源码二次更改，和devDependencies/dependencies同级\n\n\"resolutions\": {\n    \"code-push\": \"git+https://gitee.com/Lewin_Li/code-push.git#v1.0.0\"\n  },\n  \n \u003e 2. 打包脚本\n\n```shell\n#!/bin/sh\n# 部署应用\nDEPLOY_APP_IOS=\"codepushapp名称\"\nDEPLOY_APP_ANDROID=\"codepushapp名称\"\nALIYUN_OSS_PACKAGE_PREFIX=\"阿里云文件路径\"\nALIYUN_OSS_ENDPOINT=\"阿里云\"\nALIYUN_OSS_BUCKET=\"阿里云\"\n# 部署平台 All | iOS | Android\nDEPLOY_PLATFORM=\"All\"\n# 部署类型 Staging | Production\nDEPLOY_TYPE=\"Staging\"\n# 部署版本\nDEPLOY_VERSION=$(npx -c 'echo \"$npm_package_version\"' | grep -Eo '[0-9]+\\.[0-9]+')\n# 部署描述\nDEPLOY_DESC=\"\"\n\nPOSITIONAL=()\nwhile [[ $# -gt 0 ]]; do key=\"$1\"\ncase $key in\n  -h|--help)\n  echo \"\\\ncodepush [...options] [description]\n\nexample:\nbash ./codepush -s '[\\\"更新信息\\\",\\\"可以包含空 格\\\"]'\n\noptions\n-s --staging           staging env\n-p --prod --production production env\n-v --version X.X       version\n-i --ios               ios only\n-a --android           android only\n-c --clean             clean history\n-h --help              help\"\n  exit\n  ;;\n  -s|--staging)\n  DEPLOY_TYPE=\"Staging\"\n  #自己的环境配置可以自行去掉\n  cp ./config-dev.ts ./src/configs/index.ts\n  shift\n  ;;\n  -p|--prod|--production)\n  DEPLOY_TYPE=\"Production\"\n  cp ./config-pro.ts ./src/configs/index.ts\n  shift\n  ;;\n  -v|--version)\n  DEPLOY_VERSION=\"$2\"\n  shift\n  shift\n  ;;\n  -i|--ios)\n  DEPLOY_PLATFORM=\"iOS\"\n  shift\n  ;;\n  -a|--android)\n  DEPLOY_PLATFORM=\"Android\"\n  shift\n  ;;\n  -c|--clean)\n  CLEAN=1\n  shift\n  ;;\n  *)\n  POSITIONAL+=(\"$1\")\n  shift\n  ;;\nesac\ndone\nset -- \"${POSITIONAL[@]}\"\nDEPLOY_DESC=\"$1\"\n\nCOMMAND=\"\"\n\nif [[ $CLEAN -eq 1 ]]; then\n  # clean history\n  if [[ $DEPLOY_PLATFORM == \"iOS\" ]]; then\n    COMMAND=\"code-push deployment clear ${DEPLOY_APP_IOS} ${DEPLOY_TYPE}\"\n  elif [[ $DEPLOY_PLATFORM == \"Android\" ]]; then\n    COMMAND=\"code-push deployment clear ${DEPLOY_APP_ANDROID} ${DEPLOY_TYPE}\"\n  elif [[ $DEPLOY_PLATFORM == \"All\" ]]; then\n    COMMAND=\"\\\ncode-push deployment clear ${DEPLOY_APP_IOS} ${DEPLOY_TYPE} \u0026\u0026\ncode-push deployment clear ${DEPLOY_APP_ANDROID} ${DEPLOY_TYPE}\"\n  fi\nelse\n  ENV=\"ALIYUN_OSS_ACCESS_KEY_ID=你的 \\\nALIYUN_OSS_ACCESS_KEY_SECRET=你的 \\\nALIYUN_OSS_REGION=oss-cn-shanghai \\\nALIYUN_OSS_BUCKET=${ALIYUN_OSS_BUCKET} \\\nALIYUN_OSS_CNAME=true \\\nALIYUN_OSS_ENDPOINT=${ALIYUN_OSS_ENDPOINT} \\\nALIYUN_OSS_PACKAGE_PREFIX=${ALIYUN_OSS_PACKAGE_PREFIX}\"\n\n  # deploy\n  if [[ $DEPLOY_PLATFORM == \"iOS\" ]]; then\n    COMMAND=\"${ENV} \\\nyarn run code-push-package-sync release ${DEPLOY_APP_IOS} \\\n--platform ios \\\n--deployment ${DEPLOY_TYPE} \\\n--targetVersion ${DEPLOY_VERSION} \\\n--description '${DEPLOY_DESC}'\"\n  elif [[ $DEPLOY_PLATFORM == \"Android\" ]]; then\n    COMMAND=\"${ENV} \\\nyarn run code-push-package-sync release ${DEPLOY_APP_ANDROID} \\\n--platform android \\\n--deployment ${DEPLOY_TYPE} \\\n--targetVersion ${DEPLOY_VERSION} \\\n--description '${DEPLOY_DESC}'\"\n  elif [[ $DEPLOY_PLATFORM == \"All\" ]]; then\n    COMMAND=\"export ${ENV} \u0026\u0026 \\\nyarn run code-push-package-sync release ${DEPLOY_APP_IOS} \\\n--platform ios \\\n--deployment ${DEPLOY_TYPE} \\\n--targetVersion ${DEPLOY_VERSION} \\\n--description '${DEPLOY_DESC}' \u0026\u0026\nyarn run code-push-package-sync release ${DEPLOY_APP_ANDROID} \\\n--platform android \\\n--deployment ${DEPLOY_TYPE} \\\n--targetVersion ${DEPLOY_VERSION} \\\n--description '${DEPLOY_DESC}'\"\n  fi\nfi\n\necho -e \"\\033[0;31m${COMMAND}\\033[0m\"\n\n# read -p \"确认执行?(y/n): \" -n 1 -r\n# printf \"\\n\"\n# if [[ ! $REPLY =~ ^[Yy]$ ]]; then\n#   [[ \"$0\" = \"$BASH_SOURCE\" ]] \u0026\u0026 exit 1 || return 1\n# fi\n\nbash -c \"$COMMAND\"\n\n```\n\n\u003e 3. 配置global,可以在codepush检查更新之前赋值\n\n```javascript\nglobal.CustomCodePushRemotePackageHook = function (remotePackage) {\n    // codePushConfig.download_url_prefix 你自己的文件主目录  如 https://oss-xxx/codepush/HFGHHGDGDG6787HJKHGFGH8798  HFGHHGDGDG6787HJKHGFGH8798是remotePackage.packageHash\n    remotePackage.downloadUrl = `${codePushConfig.download_url_prefix}/${remotePackage.packageHash}`;\n    // console.log(\"remotePackage.downloadUrl:%s\", remotePackage.downloadUrl)\n};\n\n```\n\n\n\u003e 相同网络条件，1.1MB oss下载1s内(测试的这个是0.6s)，而从codepush服务器下载 时间在 10s以上\n\n\n使用oss下载速度\n\n\n![image](https://github.com/LewinJun/react-native-lewin-scaffold/blob/master/fast.gif)\n\n使用codepush文件下载\n\n![image](https://github.com/LewinJun/react-native-lewin-scaffold/blob/master/slow.gif)\n\n\n## 脚手架说明\n\n1. redux+persist 状态管理和redux持久化\n\n```json\n    \"react-redux\": \"7.1.3\",\n    \"redux-logger\": \"^3.0.6\",\n    \"redux-persist\": \"^6.0.0\",\n    \"redux-persist-transform-filter\": \"^0.0.20\",\n    \"redux-saga\": \"^1.1.3\",\n```\n\n2. react-navigation 页面路由\n```json\n    \"@react-navigation/bottom-tabs\": \"^5.11.8\",\n    \"@react-navigation/native\": \"^5.9.3\",\n    \"@react-navigation/stack\": \"^5.14.3\",\n```\n\n3. dva-core 2.0.4 版本\n\n\u003e 参考src/bootstrap/redux-dva.js\n\n4. \"@babel/plugin-proposal-decorators\": \"^7.11.5\" redux和组件关联使用@connection快速关联，比传统的要方便很多\n\n```javascript\nconst connectRedux = ({ user }) =\u003e ({\n    isLogin: user.isLogin\n  })\n@connect(connectRedux)\nexport default class HomeScreen extends PureComponent {\n    render() {\n        const { isLogin } = this.props\n        return (\n            \u003cView style={{ flex: 1 }}\u003e\n                \u003cText\u003e首页\u003c/Text\u003e\n                \u003cTouchableOpacity onPress={()=\u003e{\n                }} style={{ alignItems: \"center\", justifyContent: \"center\" }}\u003e\n                    \u003cText style={{ width: 200, height: 50,color: \"red\" }}\u003e{isLogin ? \"退出登录\" : \"登录\"}\u003c/Text\u003e\n                \u003c/TouchableOpacity\u003e\n                \n            \u003c/View\u003e\n        )\n}\n```\n\n## 项目架构目录\n\n### 目录结构\n\n\u003e1. assets 资源\n\n\u003e2. bootstrap app启动相关代码文件\n\n         index.js app启动的主入口，包含redux, persistor持久化\n\n         lifecycle.js app启动生命周期，核心的两个方法\n\n```javascript\n   /**\n    * 所有页面出现之前执行\n    * **不要添加网络请求相关操作，如果超时会导致应用一直等待在启动页**\n    */\n    export const beforeRunApp = async function () {\n\n    }\n\n    /**\n     * redux 数据还原后执行\n     */\n    export const afterRehydrated = async function () {\n        \n    }\n```\n\n        redux-dva.js 我们用的dva-core管理redux等第三方框架\n\n        redux-logger.js redux相关日志输出debug\n\n        redux-persist.js redux本地持久化配置\n\n\u003e 3. components 自己自定义的一些组件目录\n\n\u003e 4. configs 配置文件 目前有个redux持久化的配置文件persist.ts，需要持久化的redux把namespace加入到白名单\n\n\u003e 5. help 一些帮助类\n    \n         react-navigation.ts 路由跳转帮助类\n\n         redux-persist.ts\n        \n         redux.ts redux帮助类，如一些基本方法dispatch，getState\n\n\u003e 6. models redux的models相关类文件\n\n\u003e 7. routers react-navigation 相关页面和tabbar配置文件 具体相关类可以看头文件注释\n\n\u003e 8. screens 所有的功能模块主页面\n\n\n\n\u003e 热更新,使用codepush\n\n\n\n\n## 问题解决\n\n### Error: Unable to resolve module `@react-native-community/masked-view` from `node_modules/react-navigation-stack/lib/module/vendor/views/MaskedView.js`\n\nnpm i @react-native-community/masked-view\ncd ios \u0026 pod install \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flewinjun%2Freact-native-lewin-scaffold","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flewinjun%2Freact-native-lewin-scaffold","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flewinjun%2Freact-native-lewin-scaffold/lists"}