React native use react-navigation jump after multiple page data transfer summary _react-native

Objective

Recently in the background of a management system modified into mobile phone app, using React-native, the back end of the use of thinkphp 3.2.3. Originally used in the traditional thinkphp template tag rendering page, plus JS to achieve a set of management system, now need all mobile phone app, originally told me is for my practicing, but how do I feel that I was fooled ...

Back to the point, because it is the first time to write this component of things, coupled with the designers to yesterday to give me a complete design draft, so the whole, plus the National Day holiday, almost written nearly one months. The biggest feeling is to write this thing first need to trample a pit, be a problem card half-day, one day is normal, do not feel that their efficiency is low, you will find fear out of the pit after you see a higher landscape. The second is to write more, this is really my personal feelings, in the process of writing you need to consider this complex content can not be integrated into a component, so that the use of other pages, this function need not be encapsulated into a function, there are styles, in short, there must be a global view, Do not feel more complex code copy sticky paste to another page can also be used, do not have this idea, when the time to revise, that sour, simply can't believe. So this is the 3rd, the designer's manuscript ... When I began to write the designer in the busy other projects, so the manuscript has not been, then I had to first use thinkphp template way to render data to Ajax to obtain data, originally some of the functions of the page I have completed, but when the designer gave me the manuscript when I was completely dumbfounded, Originally I intend to complete in a page content, was he divided into several pages, and multiple pages also need to pass the value, plus some very cool animation effect. Basically equal to the previous part of my writing, in addition to getting data from the background has not changed, all the other White wrote, my heart is very tired. A dish, tell the truth, at that time really want to pinch designers ...

The following is one of the more complicated problems I have encountered, of course, the explanation is simple after white. Situation Analysis

Data structure: order, Order information (page 1) merchandise, there are many items under each order (page 2)

So when you create page 1, you need to call the page multiple times to add the product information from the order, and you need the page 3来 to edit the new good page 2 data. Page 1

Page 2

There are some real data in Page 3 of the design, so there is no release, the content is consistent with page 2, just fills the data

After you fill out some information on page 1, you need to jump to page 2, continue to refine some information in page 2, and then return to page 1. This time in fact, page 2 has two options, 1 is the use of modal analog page, but I always shut down the modal box, so I had to write a file page 2, then use navigate to jump, but this time is the beginning of a nightmare. Look at the following jump order:

This time in fact, Page 1 is the most troublesome, because the page 1 need to receive data from 3 pages, 1 is the entry file, 2 is the new product after the jump, 3 is the editing of merchandise after the jump. And here is not considered after the edit page 1 new content, and at that time I was silly not to determine the good data structure in advance, but to pass through the navigate, and did not summarize the data, resulting in the need to add a parameter when you need to modify multiple native functions, And also worry about whether the new parameters will affect the original function, in short, is to build a complex parameter transfer. See Example 1

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

When each page uses the same way to pass data, and scattered in a number of pages, when one of the pages need to add a parameter, such as page 1 to increase a pass to the page 2 parameters, then page 2 certainly need to pass back to page 1, otherwise page 1 that parameter will disappear, when the page 2 new , then the edit, that is, page 3 must also need, this time is equal to add a parameter, each jump function need to add this parameter, so it is really troublesome. Solution

So the second time you write a similar page, you set a rule for your values: only state, all data stored in state.

Use only this.setstate to manipulate the parameters they need in Page 2 and Page 3.

This is more than the original transmission of multiple values, when you need to add new values in the page, only need to be added in the public function getinitstate, and then there is no need for additional changes between the pages, compared to the original is simply a lot of confidence.