{"id":13609047,"url":"https://github.com/liumingmusic/react-native-full-example","last_synced_at":"2026-01-16T03:01:21.298Z","repository":{"id":95417821,"uuid":"71247742","full_name":"liumingmusic/react-native-full-example","owner":"liumingmusic","description":"第一个完整的react-native项目。包括服务端和移动端两部分。服务端使用express+bootstrap进行搭建，主要功能有登录、退出、模块选择、查看、修改、删除、分页等后台管理的基本功能；移动端主要用到组件View、Text、Image、ScrollView、ListView等常用的组件，也使用了第三方的地图服务(高德地图)，作为初学者。是一个很好的学习案例。","archived":false,"fork":false,"pushed_at":"2020-02-20T05:45:02.000Z","size":10298,"stargazers_count":816,"open_issues_count":0,"forks_count":210,"subscribers_count":57,"default_branch":"master","last_synced_at":"2024-11-07T14:42:44.905Z","etag":null,"topics":["cnpm","express","linux","node-inspector","nodejs","react-native","reactjs","registry","supervisor"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/liumingmusic.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-10-18T12:50:41.000Z","updated_at":"2024-09-29T09:57:02.000Z","dependencies_parsed_at":"2023-06-03T19:15:47.521Z","dependency_job_id":null,"html_url":"https://github.com/liumingmusic/react-native-full-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liumingmusic%2Freact-native-full-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liumingmusic%2Freact-native-full-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liumingmusic%2Freact-native-full-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liumingmusic%2Freact-native-full-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/liumingmusic","download_url":"https://codeload.github.com/liumingmusic/react-native-full-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248605521,"owners_count":21132188,"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":["cnpm","express","linux","node-inspector","nodejs","react-native","reactjs","registry","supervisor"],"created_at":"2024-08-01T19:01:32.052Z","updated_at":"2026-01-16T03:01:21.248Z","avatar_url":"https://github.com/liumingmusic.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"## 关注微信公众号，获取更多资源\n![](/service/public/image/it_cloud.png)\n\n# 小明找厕所\n## 0 介绍\n1. 支持ios和android两个平台\n2. 下载：git clone https://github.com/liumingmusic/react-native_toiletApp.git\n3. 安装：cd toilet --\u003e npm install --\u003e react-native run-ios(run-android)\n4. 服务端：具体看下面说明\n\n## 1、express开发\n### 1.1 npm环境设置\n1. 安装node软件：\u003chttps://nodejs.org/en\u003e\n2. 安装淘宝滤镜：npm install -g cnpm --registry = https://registry.npm.taobao.org\n3. 设置全局的npm从国内下载资源， npmrc添加配置。mac下面地址为 /Users/liumingming/.npmrc，修改strict-ssl=true 和 registry=https://registry.npm.taobao.org\n\n### 1.2 express环境搭建\n1. 安装express-generator：npm install -g express-generator，用户快速创建express项目\n2. 生成项目模块：进入到项目目录 /User/liumm/A_study/app/toiletApp 下面，执行命令 express -e service，其中-e为ejs模块简写\n3. 在服务端项目安装依赖：进入服务端项目 /User/liumm/A_study/app/toiletApp/service 执行命令 cnpm install，安装依赖类库\n4. 启动项目：使用在当前目录中使用 npm start启动项目，其中start命令在package.json已经配置\n5. 预览：启动已经开发本地的 localhost:3000，访问地址即可看见启动的页面\n6. 修改预览：项目中app.js 文件为服务启动入口路径。修改项目下面 views/index.ejs文件，重启服务进行查看\n7. express修改热加载：安装supervisor，npm install supervisor -g，修改项目自动更新\n\n### 1.3 项目文件目录组织\n```\n    service\n            bin\n                www                       //为项目启动路径\n            node_modules                  //项目所依赖lib，初创项目使用npm install得到\n            public                        //静态文件路径，其后css或者js文件不加public，app.js文件已经设置\n                css                       //项目中所有的ejs模板的css文件\n                data                      //项目未使用数据库，使用json进行数据交互\n                    config.json           //阅读模块首页配置json\n                    cookies.json          //开心一刻数据json\n                    it.json               //IT质询json\n                    manager.json          //管理json\n                    prose.json            //散文json\n                js                        //页面前端交互js文件夹\n                    lib                   //第三方lib包，包括常用的jquery、bootstrap\n                    login.js              //首页登录js文件\n                    ...                   //等等\n            routes                        //后端路由\n                 data.js                  //数据交互后端路由\n                 index.js                 //首页\n            views                         //前端页面视图ejs\n                error\n                    404.ejs\n                login.ejs\n                index.ejs\n                tuijian.ejs\n                edit.ejs\n            app.js                        //前端主入口文件\n            package.json                  //配置信息，依赖配置部分相当于java的pom.xml文件\n```\n\n### 1.4 读取接口设计\n\n**统一规定后端返回数据格式**\n```javascript\n   {\n        status : 1,           //后端返回到页面标示  1 成功 2 表单验证失败 3 系统异常 4 没有权限\n        data   : [],          //请求成功的数据信息  可为对象，也可以为对象数组\n        info   : '查询成功'    //当前接口执行的操作语  登录成功 查询成功 表单验证失败 没有权限等等\n   }\n```\n\n1. 笑料数据接口:  __/data/read/cookies__\n2. 互联网资讯接口: __/data/read/it__\n3. 管理数据接口:   __/data/read/manager__\n4. 散文数据接口:   __/data/read/prose__\n5. 阅读模块配置:   __/data/read/config__\n\n### 1.6 数据存储接口设计\n**写入操作数据都为post请求，统一为 /data/write，传入参数如下：**\n**删除操作数据都为post请求，统一为 /data/delete，传入参数如下：**\n```javascript\n    新增\n    {\n        type:   type,  //修改资源的类别\n        title:  title, //文章标题\n        url:    url,   //文章路径\n        img:    img    //图片路径\n    }\n```\n```javascript\n    删除\n    {\n        type:   type,  //修改资源的类别\n        id:     id,    //唯一id\n    }\n```\n### 1.7 页面开发\n1. 登录界面\n![登录界面](/service/public/image/login.png \"登录界面\")\n2. 首页界面\n![首页界面](/service/public/image/index.png \"首页界面\")\n3. 编辑界面\n![编辑界面](/service/public/image/edit.png \"编辑界面\")\n4. 删除操作\n![删除操作](/service/public/image/delete.png \"删除操作\")\n4. 修改操作\n![修改操作](/service/public/image/update.png \"修改操作\")\n5. 查看操作\n![查看操作](/service/public/image/showImage.png \"查看操作\")\n\n### 1.8 调试express代码\n\n1. 安装node-inspector: sudo cnpm install -g node-inspector\n2. Terminal输入: supervisor --debug ./bin/www\n3. 打开新的Terminal输入: node-inspector \u0026 (注:也是在项目目录之中)\n4. 输入第三步显示的地址，开发浏览器访问输入(http://127.0.0.1:8080/?port=5858)，接下来就和调试javascript一样了\n5. 如果不想使用8080端口可以修改: node-inspector \u0026 -p 8888\n\n### 1.9 项目部署在服务器中\n1. 购买云服务器平台(可以看看阿里云、华为云、腾讯云)，目的只是操作技术，并非运维，只要能用就行\n2. 下载linux版的nodejs包，下载xshell进行安装\n3. 购买好的云服务账号，使用shell进行登录(网上教程很多，就是单纯的登录进去)\n4. 使用xshell自带的工具rz(在命令行中输入rz之后回车)，选择下载好的nodejs，进行远程导入，\n5. 使用命令: tar -xzf node-v4.4.4-linux-arm64.tar.gz 进行解压(注:导入进行来的node包，可以选择你知道的路径下面，便于后续查找)\n6. 进入到当前解压node的目录，输入pwd命令，获取当前文件夹的全路径\n7. 使用软连接快速使用命令(其中一个是node，一个是npm)，使用软连接(类似快捷方式):\nln -s /home/kun/mysofltware/node-v0.10.28-linux-x64/bin/node /usr/local/bin/node\nln -s /home/kun/mysofltware/node-v0.10.28-linux-x64/bin/npm /usr/local/bin/npm\n8. 使用npm安装开发中使用express相关的包\n9. 新建一个文件夹，在里面使用git clone xxx.git 克隆你的项目，之后进入项目路径(服务端)，输入npm install 安装相应的依赖\n10. 使用npm安装pm2，用来启动和查看node相关的服,可参考 \u003chttps://segmentfault.com/a/1190000002539204\u003e\n11. 使用命令: pm2 start ./bin/www 启动服务，即可使用外网查看。\n12. 只是大致记录步骤，后续视频完善。\n\n***\n\n## 2、app开发\n### 2.1 react native 环境搭建\n1. 首先和后端express开发一下，安装node(上面操作过就可以忽略)\n2. 使用cnpm安装react-native-cli，命令如下：cnpm install -g react-native-cli\n3. 接下来可以react-native 这个命令初始化项目，命令如下：react-native init toilet（其中toilet为初始化项目的文件夹名称，也就是项目名）\n4. 接下来进入项目路径，cd toilet，执行命令react-native run-ios进行项目启动。这样就可以看见初始化状态下面的项目了\n5. 修改index.ios.js文件，保存。选中模拟器使用快捷键 command+r 进行修改后的刷新\n\n### 2.2 文件目录组织\n```\n    toilet\n            __tests__                        //测试文件\n            android                          //安卓编译之后的文件\n            common                           //工具类\n                utils.js\n            html                             //静态页面，用webview进行显示\n                css\n                image\n                js\n                nearby.html\n                weather.html\n            ios                              //ios编译之后的文件\n            ios_views                        //ios开发使用的组件，为了区别和andriod\n                read                         //阅读模块所有涉及到的组件\n                    cateagory.js             //分类组件\n                    list.js                  //列表组件\n                    recommend.js             //推荐组件\n                    search.js                //搜索组件\n                    topic.js                 //置顶组件\n                setting                      //设置组件\n                    about.js                 //关于组件\n                    detail.js                //详情组件\n                    tips.js                  //友情提示组件\n                    help.js                  //帮助组件\n                readPage.js                  //阅读模块\n                settingPage.js               //设置模块\n                toiletPage.js                //卫生间模块\n                twebview.js                  //webview组件\n                weatherPage.js               //天气模块\n            node_modules                     //第三方依赖的jar\n            index.ios.js                     //ios开发主程序入口\n            package.json                     //配置文件\n```\n\n### 2.3 组件关系图\n![app模块关系图](/service/public/image/structure.png \"app模块关系图\")\n\n### 2.4 app运行展示\n\u003cimg src=\"/service/public/image/app/1.png\" width = \"270\" height = \"480\"/\u003e   \u003cimg src=\"/service/public/image/app/2.png\" width = \"270\" height = \"480\"/\u003e   \u003cimg src=\"/service/public/image/app/3.png\" width = \"270\" height = \"480\"/\u003e\n\u003cimg src=\"/service/public/image/app/4.png\" width = \"270\" height = \"480\"/\u003e   \u003cimg src=\"/service/public/image/app/5.png\" width = \"270\" height = \"480\"/\u003e   \u003cimg src=\"/service/public/image/app/6.png\" width = \"270\" height = \"480\"/\u003e\n***\n\u003cimg src=\"/service/public/image/app/android_1.png\" width = \"270\" height = \"480\"/\u003e   \u003cimg src=\"/service/public/image/app/android_2.png\" width = \"270\" height = \"480\"/\u003e   \u003cimg src=\"/service/public/image/app/android_3.png\" width = \"270\" height = \"480\"/\u003e\n\u003cimg src=\"/service/public/image/app/android_4.png\" width = \"270\" height = \"480\"/\u003e\n### 2.5 优化加载\n打包jsbundle文件 加载成功便于app加载\nreact-native bundle --entey-file index.ios.js --platform ios --dev false --bndle-output main.ios.jsbundle\n\n### 2.6 第三方组件\n1. [react-native-material-design](https://github.com/react-native-material-design/react-native-material-design)\n2. [react-native-image-picker](https://github.com/marcshilling/react-native-image-picker)\n3. [react-native-barcodescanner](https://github.com/ideacreation/react-native-barcodescanner)\n4. [react-native-gifted-chat](https://github.com/FaridSafi/react-native-gifted-chat)\n5. [fastui-form](https://github.com/roscoe054/fastui-form)\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliumingmusic%2Freact-native-full-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliumingmusic%2Freact-native-full-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliumingmusic%2Freact-native-full-example/lists"}