react native使用react-navigation跳转后多页面数据传递总结

前言

最近在将后台的一个管理系统修改成手机app，使用react-native，后端使用的是thinkphp 3.2.3．原本采用的传统的thinkphp模板标签渲染页面，加上js来实现的一套管理系统，现在需要全部手机app，原先跟我说是给我练手的，但是我怎么感觉自己被忽悠了？？？

回到正题，由于是第一次写这种组件化的东西，加之设计师到昨天才给我完整的设计稿，所以前前后后，加上国庆放假，几乎写了快一个月了．

• 最大的感触是写这玩意第一需要踩坑，被一个问题卡半天，一天的是正常的，别觉得自己效率低，你会发现怕出坑后你看到了更高的风景．
• 第二就是多写，这真的是我切身的感受，在你写的过程中需要去考虑这个复杂的内容可以不可以集成成一个组件，从而在其他页面中使用，这个函数需不需要封装成一个函数，还有样式，总之就是一定要有全局观，不要觉得再复杂的代码复制粘帖到另一个页面中也能用，千万不要有这种思想，到时候修改的时候，那酸爽，简直不敢相信．
• 所以这个时候就是第三点，设计师的稿子！！！在我开始写的时候设计师在忙别的项目，所以稿子一直没有，那时候我就只好先把原先使用thinkphp的模板方式渲染数据改为Ajax获取数据，本来一些页面的功能我都完成了，可是当设计师把稿子给我的时候我彻底傻眼了，原本我打算在一个页面内完成的内容，被他分成了多个页面，而且多个页面间还需要传值，加上一些很炫的动画效果．基本等于前面我写的部分除了从后台获取数据没有变之外，别的全部白写了，我的心好累．一皿一，讲真，那时候真的想掐设计师．．．．．．

下面就是我算是遇到的问题中比较复杂的一个，当然，说明白之后也简单的．

情况分析

数据结构：

• 订单，有订单信息(页面１)
• 商品，每笔订单下有多件商品(页面２)

所以当创建页面１后，需要多次调用页面２来添加该笔订单中的商品信息，而且还需要页面３来编辑新建的好的页面２的数据．

页面１

页面２

设计稿的页面３中有一些真实的数据，所以没有放出来，内容跟页面２一致的，只是填充了数据

在页面１填写一些信息后需要跳转到页面２，在页面２中继续完善一些信息，之后返回页面１．这个时候其实页面２有两种选择方式，１是使用Modal模拟页面，但是我总是关不掉那个Modal框，所以我只好把页面２单独写成一个文件，之后使用navigate进行跳转，但是这个时候就是噩梦的开始了．看下面的跳转顺序：

这个时候其实页面１是最麻烦的，因为页面１需要接收来自３个页面的数据，１是入口文件，２是新增商品后的跳转，３是编辑商品后的跳转．而且这里还没有考虑之后的编辑页面１新建的内容，而且那时候我很傻的没有提前确定好数据结构，只是将数据传递通过navigate进行传递，而且没有对数据进行总结，导致当需要添加一个参数的时候就需要修改多个native的函数，并且还要担心新加的参数会不会影响原始的功能，简单来说就是构建了一个复杂的参数传递．看例子１

const {navigate}=this.props.navigation;navigate("RouteName",{param1:value,param2:value,param3:value})

当每个页面都使用这样的方式传递数据的时候，并散落在多个页面的时候，当其中一个页面需要添加一个参数时，比如页面１要增加一个传递给页面２的参数，那么页面２肯定就需要传递回页面１，否则页面１中的那个参数就会消失，当页面２新增时，那么编辑时，即页面３就肯定也需要，这时候等于增加一个参数，每个跳转函数都需要添加该参数，这样就真的很麻烦了．

解决方案

所以第二次写类似页面的时候就给自己的传值定了一个规则：只传state，所有数据都保存在state中．

在页面２和页面３中只使用this.setState操作他们需要的参数．

这样比起原来的传多个值，当需要在页面中加入新值时，仅需要在公共函数getInitState中进行添加，之后在各个页面间就不需要进行额外的修改了，比起原来简直放心了许多．