当前位置：首页 > 软件库 > Web应用开发 > >

react-native-full-example

授权协议 Readme

开发语言 JavaScript

所属分类 Web应用开发

软件类型开源软件

地区不详

投递者太叔富

操作系统跨平台

开源组织无

适用人群未知

软件概览

关注微信公众号，获取更多资源

小明找厕所

0 介绍

支持ios和android两个平台
下载：git clone https://github.com/liumingmusic/react-native_toiletApp.git
安装：cd toilet --> npm install --> react-native run-ios(run-android)
服务端：具体看下面说明

1、express开发

1.1 npm环境设置

安装node软件：https://nodejs.org/en
安装淘宝滤镜：npm install -g cnpm --registry = https://registry.npm.taobao.org
设置全局的npm从国内下载资源， npmrc添加配置。mac下面地址为 /Users/liumingming/.npmrc，修改strict-ssl=true 和 registry=https://registry.npm.taobao.org

1.2 express环境搭建

安装express-generator：npm install -g express-generator，用户快速创建express项目
生成项目模块：进入到项目目录 /User/liumm/A_study/app/toiletApp 下面，执行命令 express -e service，其中-e为ejs模块简写
在服务端项目安装依赖：进入服务端项目 /User/liumm/A_study/app/toiletApp/service 执行命令 cnpm install，安装依赖类库
启动项目：使用在当前目录中使用 npm start启动项目，其中start命令在package.json已经配置
预览：启动已经开发本地的 localhost:3000，访问地址即可看见启动的页面
修改预览：项目中app.js 文件为服务启动入口路径。修改项目下面 views/index.ejs文件，重启服务进行查看
express修改热加载：安装supervisor，npm install supervisor -g，修改项目自动更新

1.3 项目文件目录组织

    service
            bin
                www                       //为项目启动路径
            node_modules                  //项目所依赖lib，初创项目使用npm install得到
            public                        //静态文件路径，其后css或者js文件不加public，app.js文件已经设置
                css                       //项目中所有的ejs模板的css文件
                data                      //项目未使用数据库，使用json进行数据交互
                    config.json           //阅读模块首页配置json
                    cookies.json          //开心一刻数据json
                    it.json               //IT质询json
                    manager.json          //管理json
                    prose.json            //散文json
                js                        //页面前端交互js文件夹
                    lib                   //第三方lib包，包括常用的jquery、bootstrap
                    login.js              //首页登录js文件
                    ...                   //等等
            routes                        //后端路由
                 data.js                  //数据交互后端路由
                 index.js                 //首页
            views                         //前端页面视图ejs
                error
                    404.ejs
                login.ejs
                index.ejs
                tuijian.ejs
                edit.ejs
            app.js                        //前端主入口文件
            package.json                  //配置信息，依赖配置部分相当于java的pom.xml文件

1.4 读取接口设计

统一规定后端返回数据格式

{
        status : 1,           //后端返回到页面标示  1 成功 2 表单验证失败 3 系统异常 4 没有权限
        data   : [],          //请求成功的数据信息  可为对象，也可以为对象数组
        info   : '查询成功'    //当前接口执行的操作语  登录成功 查询成功 表单验证失败 没有权限等等
   }

笑料数据接口: /data/read/cookies
互联网资讯接口: /data/read/it
管理数据接口: /data/read/manager
散文数据接口: /data/read/prose
阅读模块配置: /data/read/config

1.6 数据存储接口设计

写入操作数据都为post请求，统一为 /data/write，传入参数如下：删除操作数据都为post请求，统一为 /data/delete，传入参数如下：

新增
    {
        type:   type,  //修改资源的类别
        title:  title, //文章标题
        url:    url,   //文章路径
        img:    img    //图片路径
    }

删除
    {
        type:   type,  //修改资源的类别
        id:     id,    //唯一id
    }

1.7 页面开发

登录界面
首页界面
编辑界面
删除操作
修改操作
查看操作

1.8 调试express代码

安装node-inspector: sudo cnpm install -g node-inspector
Terminal输入: supervisor --debug ./bin/www
打开新的Terminal输入: node-inspector & (注:也是在项目目录之中)
输入第三步显示的地址，开发浏览器访问输入(http://127.0.0.1:8080/?port=5858)，接下来就和调试javascript一样了
如果不想使用8080端口可以修改: node-inspector & -p 8888

1.9 项目部署在服务器中

购买云服务器平台(可以看看阿里云、华为云、腾讯云)，目的只是操作技术，并非运维，只要能用就行
下载linux版的nodejs包，下载xshell进行安装
购买好的云服务账号，使用shell进行登录(网上教程很多，就是单纯的登录进去)
使用xshell自带的工具rz(在命令行中输入rz之后回车)，选择下载好的nodejs，进行远程导入，
使用命令: tar -xzf node-v4.4.4-linux-arm64.tar.gz 进行解压(注:导入进行来的node包，可以选择你知道的路径下面，便于后续查找)
进入到当前解压node的目录，输入pwd命令，获取当前文件夹的全路径
使用软连接快速使用命令(其中一个是node，一个是npm)，使用软连接(类似快捷方式):ln -s /home/kun/mysofltware/node-v0.10.28-linux-x64/bin/node /usr/local/bin/nodeln -s /home/kun/mysofltware/node-v0.10.28-linux-x64/bin/npm /usr/local/bin/npm
使用npm安装开发中使用express相关的包
新建一个文件夹，在里面使用git clone xxx.git 克隆你的项目，之后进入项目路径(服务端)，输入npm install 安装相应的依赖
使用npm安装pm2，用来启动和查看node相关的服,可参考 https://segmentfault.com/a/1190000002539204
使用命令: pm2 start ./bin/www 启动服务，即可使用外网查看。
只是大致记录步骤，后续视频完善。

2、app开发

2.1 react native 环境搭建

首先和后端express开发一下，安装node(上面操作过就可以忽略)
使用cnpm安装react-native-cli，命令如下：cnpm install -g react-native-cli
接下来可以react-native 这个命令初始化项目，命令如下：react-native init toilet（其中toilet为初始化项目的文件夹名称，也就是项目名）
接下来进入项目路径，cd toilet，执行命令react-native run-ios进行项目启动。这样就可以看见初始化状态下面的项目了
修改index.ios.js文件，保存。选中模拟器使用快捷键 command+r 进行修改后的刷新

2.2 文件目录组织

    toilet
            __tests__                        //测试文件
            android                          //安卓编译之后的文件
            common                           //工具类
                utils.js
            html                             //静态页面，用webview进行显示
                css
                image
                js
                nearby.html
                weather.html
            ios                              //ios编译之后的文件
            ios_views                        //ios开发使用的组件，为了区别和andriod
                read                         //阅读模块所有涉及到的组件
                    cateagory.js             //分类组件
                    list.js                  //列表组件
                    recommend.js             //推荐组件
                    search.js                //搜索组件
                    topic.js                 //置顶组件
                setting                      //设置组件
                    about.js                 //关于组件
                    detail.js                //详情组件
                    tips.js                  //友情提示组件
                    help.js                  //帮助组件
                readPage.js                  //阅读模块
                settingPage.js               //设置模块
                toiletPage.js                //卫生间模块
                twebview.js                  //webview组件
                weatherPage.js               //天气模块
            node_modules                     //第三方依赖的jar
            index.ios.js                     //ios开发主程序入口
            package.json                     //配置文件

2.3 组件关系图

2.4 app运行展示

2.5 优化加载

打包jsbundle文件加载成功便于app加载react-native bundle --entey-file index.ios.js --platform ios --dev false --bndle-output main.ios.jsbundle

2.6 第三方组件

使用案例

react-native run-android遇到问题总结

【1】、Task :react-native-fetch-blob:compileDebugJavaWithJavac FAILED Putting task artifact state for task ':react-native-fetch-blob:compileDebugJavaWithJavac' into context took 0.0 secs. file or directo
【React Native进阶】React Native Gesture Handler的使用

背景说到React Navtive的性能优化，首先要了解React Native的运行机制。React Native程序主要运行在三个并行的线程上： JS Thread：我们写的JS代码逻辑都是在这个线程上执行； UI Thread：即原生线程，当我们需要调用原生的渲染或者能力时会运行到这个线程上； Shadow Thread：这个线程创建和管理着Shadow Tree，它类似于虚拟DOM。它通
《React-Native系列》9、 Networking之fetch

今天，我们来看看RN怎么处理网络请求的，主要来看看fetch API。还是，先来看看官网怎么说的。 Using Fetch React Native provides the Fetch API for your networking needs. Fetch will seem familiar if you have used XMLHttpRequest or other network
在React Native和Node.js中验证iOS订阅收据

交易收据：订阅管理的关键要素 (Transaction receipts: the key element of subscription management) Transaction receipts are a key element in managing subscriptions through in-app purchases, as well as for automaticall
fritz 使用手册_如何在带有Fritz的React Native中使用样式传输API

fritz 使用手册 Fritz is a platform that’s intended to make it easy for developers to power their mobile apps with machine learning features. Currently, it has an SDK for both Android and iOS. The SDK cont
一个关于react-native的demo，详细请转GitHub

react native 0 介绍支持ios和android两个平台下载：git clone https://github.com/chunlei36/react-native-full-example-chunlei.git 安装：cd toilet --> npm install --> react-native run-ios(run-android) 服务端：具体看下面说明 1、exp
用于React，React Native，JavaScript和生产力的顶级VSCode扩展

I’ve used VSCode full-time since 2016. Before I was using Visual Studio and I was looking for lighter editor. I would like to share with you my extensions that I have currently installed. I’m working
RN路由-React Navigation--Tab navigation

##引言本来打算将React Navigation-Guides这一章内容集中写在这篇文章内的，但由于篇幅太长，阅读的时候很费劲，所以这里将Guides这一章的内容分篇来记录。首先，我们来看看Tab navigation！ ##Tab navigation 移动应用中最常见的导航样式可能是基于标签的导航。它可以是屏幕底部的标题，也可以是标题下方的顶部（甚至代替标题）。本指南介绍createB