An experimental example of jet navigation?

Question

I started using a native reaction a few weeks ago. For my first application, I used the navigator to navigate using the navigation bar component to display the title buttons and the left / right side. After reading facebook, I refused to support the navigator and developed n an experimental survey or navigation-rfc (let's call " NavExp " to make it short), I am trying to use NavExp. But I can not get around it.

Application menu : DrawerLayout for android, TabIOS for IOS. And it will have a navigation bar to display the name and right (the menu for specific content - print, copy) / left (for the menu) depending on the content.

• What is the difference between navigator and NavExp? (he says that he offers navigation through the reduction or flow mode, also cannot understand it).
• What is the purpose of the gearbox? (Which one to use? (Stack, Find))
• NavigationRootContainer?
• Where to declare all my states, since these are constants?
• What is the difference between action and state?
• For navigators, we had a renderScene function for rendering a scene, in NavExp

Answer 1

This is a lot to unpack into one question, so you will probably be better served by doing some research and then dividing this question into several smaller questions. Here are a few pointers to get you started.

Overall: The goal of the new NavigationExperimental is to create a stateless navigation structure for React Native, following the same principles as React. The old Navigator component was more dependent on the state of conservation and mutation than the new NavExp. If you are thinking about how React likes to take a set of details and then visualize a complete new user interface when something changes, the new NavExp is designed to make this a little easier.

This is because it is even more useful when you use a Flux-like pattern to manage the state in your application. I would suggest reading Flux , or, in my opinion, it is easier to understand the Redux implementation of the template.

This is the answer to question # 1, and you’ll better understand the answer to # 2 after going through these links.

3. NavigationRootContainer is a useful element (although not required) that provides part of the structure and functionality when using NavExp. Facebook examples use it. If you use NavExp with something like Redux, you do not need to use it because you will duplicate the use of reducers.

4. I assume that you are talking about states when deciding whether to display the corresponding scene / map / screen? They can be declared anywhere, and in fact they are just strings. You do not even need to declare them anywhere.

5. State is a set of data and variables that make up the moving parts of your application. For example, if you had a shopping cart application, you would keep the customer’s name and the contents of your shopping cart in the state of your application, as well as on which screen they were at the moment, on which screen they were before, etc. Anything that can change goes into a state.

Actions are like shooting a flash in the sky to alert other parts of your application that something has changed. Does the user add a new product to his cart? Submit the ITEM_ADDED_TO_CART action along with the item ID. Does the user press a button on the main screen? Submit the NAVIGATE_TO_SCREEN action along with the identifier for the main screen. Actions are processed by reducers, and reducers make changes to the state, and then tell React Native to start re-rendering everything.

6. It was not formed as a question, but you have a renderScene method with NavExp that functions in almost the same way: it spits out the contents of the screen, whatever it may be.

(FYI, I don’t have an official word about it, but if you’re already used to Navigator and have implemented it, you are probably going to continue it well for the foreseeable future instead of rewriting your application to take advantage of NavigationExperimental.)

Answer 2

Based on the comments from here, you should use NavigationExpermiental: https://github.com/facebook/react-native/issues/6184

Here is a good example to get you started: https://github.com/thebakeryio/react-native-complex-nav

 import { View, NavigationExperimental } from 'react-native'; import React, { Component } from 'react'; import styles from './styles'; import { connect } from 'react-redux'; import ApplicationTabs from '../ApplicationTabs'; import NewItem from '../NewItem'; const { CardStack: NavigationCardStack } = NavigationExperimental; class GlobalNavigation extends Component { render() { return ( <NavigationCardStack direction={'vertical'} navigationState={this.props.navigation} onNavigate={this.props.onNavigate} renderScene={this._renderScene.bind(this)} renderOverlay={this._renderHeader.bind(this)} style={styles.main} /> ); } _renderHeader(props) { return null; } _renderScene(props) { if (props.scene.navigationState.key === 'applicationTabs') { return ( <View style={{flex: 1}}> <ApplicationTabs /> </View> ); } if (props.scene.navigationState.key === 'new') { return ( <View style={{flex: 1}}> <NewItem onClose={this._onCloseNewItem.bind(this)} /> </View> ); } } _renderTitleComponent(props) { return null; } _onCloseNewItem() { this.props.onNavigate({ type: 'BackAction' }); } } function mapDispatchToProps(dispatch) { return { dispatch }; } function mapStateToProps(state) { return { navigation: state.get('globalNavigation') }; } export default connect(mapStateToProps, mapDispatchToProps, (stateProps, dispatchProps, ownProps) => { return Object.assign({}, dispatchProps, stateProps, { onNavigate: (action) => { dispatchProps.dispatch( Object.assign(action, { scope: stateProps.navigation.key }) ); } }); })(GlobalNavigation);