阅读 133

徒手生撸-完成React-Native项目的first blood

      上一篇文章和大家一起搭建了RN的开发环境,本期和大家一起拿到一个自己在RN上的first blood。
首先我们来看一下要一个真正用于项目开发的RN项目,我们都需要哪些必备要素。
小明:“我们需要一个电脑” 。 “嗯。。。。,小明请你在走廊里把这桶水顶在头顶,很好,没让水洒出来”。
好了,言归正传,咱们来列一下。
1.路由跳转 //将我们页面丰富起来,不再是孤孤单单的一个页面。 (单身狗的心在痛)
2.数据请求 //确保我们不再是单机游戏,而是和后台服务完成数据交互起来。 (联谊聚会?不存在的,我自己一个人可以在自己的房间哭很久)
3.状态管理 //用于父子组件之间的数据状态管理。(我连女朋友都没有,哪来的孩子。。。。)

好了,不说了,都是眼泪,咱们开始撸码。首先想打架介绍一个项目


https://github.com/BrotherWY/react-native-dva
这个项目是基于dva框架的一个rn项目,对于一个新手(其实我也是菜鸟来着)来说,有很好的学习意思。
首先我们来看下目录的结构
本项目已经整合状态管理,路由管理等开发必要因素,实在是大快人心。让码农撸起码来事半功倍。
下面我们开撸,我们刚才总结了项目开发的三个要素。首先我们来第一个要素“路由管理”,路由管理主要要实现两个功能点,1.页面切换,2页面间参数传递。在本项目中路由是考'react-navigation'来实现的。那么我们来看‘react-navigation’是如何实现这个两个功能点的。
首先我们新建一个页面
然后我们需要在routerConfig中配置一下我们的页面
现在页面配置完了,那么我们如何来在页面之间完成跳转呢

是通过这个函数来实现的
this.props.navigation.navigate('配置文件中的名称', { name: '需要传递的参数',id:'如我是客户id' });
这里再和大家普及一个主动出发页面返回的函数
this.props.navigation.goBack();
加上参数传递
this.props.navigation.state.params.name
设置页面标题
这里要注意的是这个一个静态变量,所以无法使用this.props.*** 来给标题动态赋值。
好了,这些足够我们的路由需求了,接下来我们来看开发第二要素“数据请求”和第三要素“状态管理”。
我来写一个完整的数据请求流程
首先我们要有一个通用的数据请求处理类,这里我是直接从其他React项目中request.js文件直接拷贝过来的。他大概长这个样子,网上有很多request.js的封装,最后我们也会提供给大家一个下载地址,大家不用慌。
这里有一个要注意的地方 在文件中引用的fetch不需要我们单独在头部import了。(这都是当初的辛酸史,有血,有泪,有屎)
有了通用请求处理类之后,我们需要定义我们自己的service,
友情提示,上图中url地址需要替换成你们自己的数据接口哦!!!
之后我们需要新建一个models文件
要做的是,把我们定义的service引入进来,定义一个GET_USER_INFO的effects,注意这个函数名称前面要有“*”,然后在函数中通过yield call来调用我们的数据接口,yield表示同步调用,这个是generator提供的功能,大家有兴趣的可以自己搜索一下。这里有一个要注意的地方“namespace”这个参数的含义是命名空间,用于解决多个models之间的互相干扰的问题,我们存储所有数据都会在这个空间下。
现在我需要把我们文件和redux关联起来
在主文件App.js中,引入并关联我们自己的models,然后在我们自己的页面中调用他
分为两个部分,
第一部分是通过connect来实现页面于redux的关联。
通过mapStateToProps这个配置,可以让我们通过this.props来直接访问model中的state数据,在配置的时候需要注意命名空间要对我们当初设置的一致。
第二部分是数据的调用
在页面componentDidMount函数中出发我们的数据加载函数,这里的payload中包含的属性,需要我们service中定义的保持一致。
好想现在一个整套的数据流程已经走完了。
现在我们对项目开发的三要素都了解了,接下来就可以在日常的需求开发中为所欲为了。因为作者本人也是菜鸟一个,所以和大家分享的主要还是一些使用的经验,并没有涉及到太多的概念于原理。 等我成长后,会再回来和大家一起聊聊原理的,我会回来的。。。

https://github.com/LeiDapeng/react-native-dva


文章分类
前端