Native routing of React native

New project Mobile to build with React-native, and then opened a new wave of learning journey

The navigator examples found in the documentation are the only return values that use Navigator as the Render method for a component, which in some cases is incompatible with human thinking (or my thinking ...), for example:
, the typical upper and lower layout, into the message/friends/friends Circle points to three pages, they are switching between the main page in the middle of the change, the top just changed a few words, the lower part is only the current tab page icon becomes highlighted

In the context of this demand
First, my ideal way to achieve is:

<view>

Changes the state of the current component according to the route in the navigator Renderscene, allowing the header and footer to render different content or styles based on state

Try a bit not very good, show only the header, it does not seem to be a component unique return value of Navigator is not displayed at all
Want to look for this component of the Renderscene function is not enough, not found ...
Perseverance to retry a bit after the solution to the idea:

0.react and RN have a very complete error detection and errors, since no error, guess usage no problem
1. Add a alert to the Render method of the component that was rendered by navigator, and found that it popped up, saying that the function of Navigator was normal and aggravated my suspicion.
2. Add a background color to the view layer of the Parcel Navigator, and find that it is not full-screen, conjecture may be Navi asynchronous rendering, causing the parent component not to open
3. Change the height of the view to reveal the login component!! OK!! It didn't show up before, because container didn't open it.
Second, in (a) has not been done, I retreat and beg the second, the use of routing Advance Declaration method?
You can use the Initialroutestack property of Navigator to initialize the routing stack
The Renderscene function of Navigator can return another navigator, which in turn is nested in such a way that the entire used route is declared in advance like React-router.
Third, the use of Navigationbar?
1. Using native <Navigator.NavigationBar> the component has a Routemapper property that requires an object type value
The object (CAN) contains three fixed properties, all functions, and the return value is the component

LeftButton (route, navigator, index, navstate) {//return Component}title (Route, Navigator, index, navstate) {//return Component}rightbutton (route, navigator, index, Navstate) {//return Component}

Note:<navigator.navigationbar> the source location in

Node_modules\react-native\libraries\customcomponents\navigator
2. The above method has certain limitations, for example, there are 4 buttons there is no way, I guess it should be possible to use custom objects! Keep updating!
The location of the Pathfinder project is Https://github.com/youmuFE/reactNativeDemo Welcome Exchange
Native routing of React native