Detailed description of the NavigatorIOS component in React Native, reactnavigatorios

Detailed description of the NavigatorIOS component in React Native, reactnavigatorios

1. Introduction to NavigatorIOS Components

1. Component Description

With NavigatorIOS, we can implement the application navigation (Routing) function, that is, switching between views, moving forward and backward. There is a navigation bar (hidden) at the top of the page ).

The NavigatorIOS component is essentially a package for UIKit navigation. Using NavigatorIOS for Route switching is actually calling the navigation of UIKit.

The NavigatorIOS component only supports the iOS system. React Native also provides a general-purpose navigation component for both iOS and Android: Navigator. Let's talk about this later.

2. Component attributes

(1) barTintColor: the background color of the navigation bar.
(2) initialRoute: used to initialize a route. The attributes of the parameter object are as follows:

{Component: function, // the title of the loaded view component title: string, // the title of the current view passPros: object, // The transmitted data backButtonIcon: Image. propTypes. source, // back button icon backButtonTitle: string, // back button title leftButtonIcon: Image. propTypes. soruce, // The left button icon leftButtonTitle: string, // The left button title onLeftButtonPress: function, // The left button to click the event rightButtonIcon: Image. propTypes. soruce, // the right button icon rightButtonTitle: string, // the right button title onRightButtonPress: function, // the right button click event wrapperStyle: [object Object object] // package style}

(3) itemWrapperStyle: customizes the style for each item, for example, setting the background color for each page.
(4) navigationBarHiddent: hides the navigation bar when the value is true.
(5) shadowHidden: if it is true, the shadow is hidden.
(6) tintColor: The color of the buttons in the navigation bar.
(7) titleTextColor: The font color on the navigation bar.
(8) translucent: if it is true, the navigation bar is translucent.

3. Component Method

When the component view is switched, the navigator is passed as an attribute object. We can use this. props. navigator to obtain the navigator object. The main method of this object is as follows:
(1) pust (route): load a new page (view or route) and route it to the page.
(2) pop (): return to the previous page.
(3) popN (n): returns N pages at a time. When N = 1, it is equivalent to the pop () method.
(4) replace (route): replace the current route.
(5) replacePrevious (route): replaces the view on the previous page and rolls back to the previous page.
(6) resetTo (route): replaces the top-level route and rolls back.
(7) popToTop (): Return to the top view.

Ii. Example

NavigatorIOS is a navigation component that comes with React Native. below is its simple application.

Initialize the first scenario

Import PropTypes from 'prop-types'; import React, {Component} from 'react '; import {NavigatorIOS, Text} from 'react-native '; import {NextScene} from 'react-native '; export default class NavigatorIOSApp extends Component {render () {return (<NavigatorIOS initialRoute ={{ component: MyScene, title: 'initialize the first scene ', }}style ={{ flex: 1 }}/>) ;}} class MyScene extends Component {static propTypes = {title: PropTypes. string. isRequired, navigator: PropTypes. object. isRequired,} _ onForward = () => {this. props. navigator. push ({component: NextScene title: 'Second Scene '});} render () {return (<View> <Text> Current Scene: {this. props. title} </Text> <TouchableHighlight onPress = {this. _ onForward }> <Text> go to the next scenario </Text> </TouchableHighlight> </View> )}}

Second scenario

Export default class NextScene extends Component {render () {return (<View> <Text> This is the second scenario </Text> </View> )}}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.