翻译 | 我在 React-Native app开发中曾经犯过的11个错误

经过差不多一年的 React Native 的开发后,我决定把我自打新手开始所犯的错误总结一下.

1. 错误的预计

真的!开始设想的 React Native(RN)的应用是完全错误的.彻底的错误.

1、你需要单独考虑 iOS 和 Android版本的布局.当然,有很多的组件是可以重用的,但是他们有不同的布局考虑.甚至他们之间的应用结构页面也都是不同的.

2、当你在预测 form的时候-你最好要一并考虑一下数据验证层.例如,当你使用React Native开发应用程序的时候,你会比使用Cordova时写更多的代码.

3、如果你需要在已经已经开发完毕,并且已经有后端(所以,你可以使用现存的API)的webapp基础上创建一个app-要确保检查每个后端提供的数据点.因为你需要在app中处理逻辑,编码应该要恰如其分.理解数据库的结构,实体之间的连接关系等等.如果你理解了数据库的结构,你可以正确的规划你的redux store(后面会讲到).(译注:分离关注点,引入了Redux,React的逻辑处理权交到了Redux手中.意识到这一点对于Redux和React的结合使用非常重要.)

2. 尽量使用已经构建好的组件(buttons,footers,headers,inputs,text)-仅仅是我个人的观点.

如果你搜索Google里面的已有React组件,可以搜到很多,例如 buttons,footers等等,有很多可以使用的组件库.如果你没有特别的布局设计,使用这些组件库将会非常有用.就用这些组件就可以了.但是如果你有特别的设计,在这个设计中 button看起来不同,你需要定制每个组件.这需要一些技巧.当然你也可以包装已经构建好的组件,定制样式就可以了.但是我认为使用使用RN的View,Text,TouchableOpaticy组件来构建自己的组件很容易,也有很大的价值.通过自己的包装过程,你可以理解怎么和RN融洽工作.也会积累更多的经验.由于是自己构建的组件,可以确保组件的版本不会被改变.所以,不要依赖外部的模块.

3. 不要把iOS和Andorid的布局分开

如果你只是在iOS和Android之间使用不同的布局,这个方法会非常有用.如果布局一样,仅仅使用RN提供的Platform API,可以根据设备平台的不同来做小小的检测. 如果布局完全不同-最好是分散到不同的文件中完成(译注:RN可以识别 fileName.ios.js 和 fileName.android.js).

如果你命名未见为index.ios.js,程序打包的时候就会在iOS中使用这个文件.类似的,在Android打包的时候会使用indexn.android.js.(译注:具体做法可以参考F8 APP的做法).

你可能会问”代码怎么复用?”.你可以把复用的代码放到助手函数中,需要的地方仅仅复用助手函数.

4. 错误的Redux store规划

可能会犯大错误的地方.

当你在设计应用的时候,你可能更多的考虑表现层.很少考虑到数据操作. Redux帮助我们正确的存储数据.如果Redux store规划的好,将会是一个一个非常有力的data管理工具.如果没有规划好,会把事情弄的一团糟.

当我刚开始构建RN app的时候,我只把reducers作为每一个container的数据容器.所以如果你有登录,密码找回,ToDO list页面-reducer应该是比较简单-:SigIn,Forgot,ToDoList. 在经过一段时间的store规划以后,我发现在我的程序中不太好管理数据了.我已经有了一个ToDo 详情页面.使用上面的想法,store需要一个ToDoDetails reducer是吗?这是一个巨大的错误!为什么?

当我从ToDo List中选择出需要传递到ToDoDetail reducer的一项.这意味着使用了额外的actions 发送数据到reducer.非常的不合适.

经过一点研究之后,我决定做点改变.结构想下面这样:

1、Auth

2、ToDos

3、Friends

Auth用于存储认证的token.仅仅如此. ToDos和Friends reducers用于储存实体,从名字很容易知道他们是干什么的.当我进入到ToDo Detail页面中-我只需要根据id来搜索所有的ToDos. 如果有更多的复杂结构,我建议使用这个计划.你会明白什么是什么.在哪里找到他们.

5. 错误的项目结构

当你是一个新手的时候,规划项目结构很难. 首先要理解你的项目有多大? 大?真的很大?巨大?还是很小?

应用中有多少页面?20?30?10?5?还是只有一个hello world页面

开始的时候,我的项目实施的结构像这样:

还好,如果你的应用不是大项目,例如最多十个页面.如果比这个规模更大,可以考虑使用:

有什么不同吗?如你所见,首要的目的是建议我们为每个container分开存储actions和reducers.如果应用较小,把Redux 模块和container分离开可能有用.如果redux Reducer和container放到一起,你可以很容易的知道哪个action和这个container关联.

如果你有通用的样式(例如:Header,Footer,Buttons)-你可以单独创建一个文件夹,叫做”styles”,之后创建index.js文件,编写通用样式,然后在每个页面重用他们.

可能会用很多不同的结构,你应该找到到底哪种是最适合你的.

6. 错误的container结构.没有从一开始就使用smart/dumb组件

当你初始化一个RN项目,在index.ios.js文件中已经有了样式,存储在一个独立的对象中.

在实际开发中,你需要使用很多的组件,不仅是由RN提供的,还有自己构建的一些组件,在构建container的时候可以重用他们

考虑这个组件:

看起来怎么样?

正如你看到的,所有的样式都放在独立的模块中-好的.没有代码复制(目前为止). 但是我们到底多长时间才在表单中使用一个字段?我不确定频率到底多少.button组件也是如此-包装在TouchableOpatcity中-应该被分离出来,便于我们在将来复用他.Image组件也可以依次来操作,移到一个独立的组件中.

经过变化以后,代码的样子:

好的,或许现在有更多的代码-因为我们添加了Avatar,FormItem.Button,组件的包装器,但是现在我们重用这些组件.把这些组件移动到独立的模块中,可以到任何需要用到的地方来导入他们.我们也可以添加一些其他的Props,例如-style,TextStyle,onLongPress,onBlur,onFocus.这些组件可以充分的定制化.

但是要确保并不要深度定制一个小组件,这样会让组件的规模过大,这样一来很难去读懂代码.确确实实是这样.在需要添加一个新属性的时候,似乎是解决问题的最简单的办法,在未来这个小举动可能会在读代码的时候把你搞晕.

关于理想化的smart/dumb的组件.看下面:

如你所见,我们升级了Button组件.做了什么变化?我们使用id属性替换了”title”属性.现在在我们的Button组件上有一些灵活性.传递 o,Button组件将会显示”Submit”,传递 2-“Delete”.但是这很成问题.

Button作为dumb组件创建,为的是仅仅展示传递的数据.传递数据这件事由他的更高一级的组件来完成. Dumb组件不应该知道周围的任何环境因素.仅仅只要执行和展示他们被告知的数据.经过这次”升级”之后.但是这个做法并不好,为什么?

如果我们把5作为id传递给组件,会发生什么?我们需要更新组件,能让他可以适应这个选项.等等,等等.Dumb组件应该仅仅展示他们被告知的数据.这就是Dumb组件要做的全部.

7. inline styles

使用RN一段时间以后,我面临一个行内书写样式的问题,像这样:

当你刚开始这么写的时候,你会想:”好了”,等我在模拟器里检查了布局以后,如果演示可以,我就会把样式转移到独立的模块中.或许这是个好的愿景,但是不幸的是,这件事不会发生.没有人这么做,除非有人提醒.

一定要把样式分到独立的模块中.这会让你远离行内样式.

8.使用redux来验证表单

这是我的项目中的错误.希望能对你有帮助.

为了由Redux协助验证表单,我需要创建action,actionType,reducer里分离字段.这让人有点恼火. 所以我决定仅借助state来完成验证过程,没有reducers,types等等.仅仅在container水平上的纯函数.这个策略对我帮助很大,从action和reducer里去掉了不必要的函数,不要操作store.

9. 过度的依赖zIndex

很多人从web开发转移到RN开发.在web开发中,有一个css 属性是z-index.它帮助我们展示我们需要的内容,在web中,这么做很酷. 在RN中,一开始是没有这个特性的,但是后来被添加进来了.起初还挺容易使用的, 要按照你想要的顺序来渲染展示层,只需要把z-Index属性作为style就可以了. 工作正常,但是经过Android测试以后… 现在我只用z-Index来设置展示层的结构.这就是zIndex能做的.

10.不读外部模块的代码

当你想节约时间,你可以使用外部的模块.通常他们都要文档.你可以从文档中获取信息并使用外部模块. 但有时,模块会崩溃.或者不像描述的那样工作.这就是你为什么需要读源码.通过读源码,你可以理解错误在哪里.或许模块是很坏的.或是是你使用的方法不对.另外就是-如果你读了其他模块的代码,你会了解到如何构建你自己的模块.

11. 要小心手势操作和动画 API

RN让我们有能力构建原生的应用.怎么让应用感觉像是原生应用.展示层,手势,还是动画? 当你使用View,Text,TextInput和其他的RN默认提供的模块的时候,手势和动画应该由PanResponder和动画API来操作.

如果你和我一样是从web转过来的RN开发者,获取用户的手势操作可能多少有点吓人-什么时间开始,何时结束,长点击,短点击.过程不是太清晰,怎么在RN中模拟这些操作?

这里是一个Button组件由PanResponder和动画来协助.创建这个组件来捕获用户的手势操作.例如,用户按压项目,然后手指拖动到另一边.在动画API的协助下,构建button按压下的透明度的变化:

首先,我们初始化PanResponder的对象实例.它有一套不同的操作句柄,我们感兴趣的是 onPanResonderGrand (用户触摸按钮是触发)和 onPanResponderRelase(用户从屏幕中移开手指是触发),两个句柄.

我们也初始化动画对象的实例,帮助我们使用动画.设定值为0,然后我们定义_setOpacity方法,调用时改变this.opacityAnimated的值.在渲染之前我们插值处理this.opacityAnimated到正常的opacity值.我们没有使用View,而是使用了Animated.View模块为了使用动态变化的opacity值. 搞定了.

正如你所见,不是很难理解具体是怎么回事.当然你需要读相关API的文档,确保你的app的完美运行.但是我希望找个例子能够帮助你开个好头.

React Native太棒了,你可以用它做几乎任何事情.如果没有RN,你要做这些事情需要 Swift/Objective C或者JAVA.然后关联到React Native.

这是一个大的社区.很多的解决办法,组件,结构等等.在你开发的时候你可能会犯很多错误. 所以我希望这篇文章能帮助你避免一些错误.

@IMWeb前端社区

本文由作者smartphp授权转发

http://www.jianshu.com/p/6b57403285df

微信：IMWebTech