Simple usage tutorial of NavigatorIOS component in React Native

This article mainly introduces the simple and detailed use of the NavigatorIOS component in React Native. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

1. Introduction to NavigatorIOS components

1, component description

Using NavigatorIOS We can implement the navigation (routing) function of the application, that is, switching between views and moving forward and backward. And there will be a navigation bar at the top of the page (can be hidden).

The NavigatorIOS component is essentially a wrapper for UIKit navigation. Using NavigatorIOS to switch routes is actually calling UIKit's navigation.

NavigatorIOS component only supports iOS system. React Native also provides a navigation component common to both iOS and Android: Navigator. Let’s talk about this later.

2, component properties

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

{
 component: function, //加载的视图组件
 title: string, //当前视图的标题
 passPros: object, //传递的数据
 backButtonIcon: Image.propTypes.source, // 后退按钮图标
 backButtonTitle: string, //后退按钮标题
 leftButtonIcon: Image.propTypes.soruce, // 左侧按钮图标
 leftButtonTitle: string, //左侧按钮标题
 onLeftButtonPress: function, //左侧按钮点击事件
 rightButtonIcon: Image.propTypes.soruce, // 右侧按钮图标
 rightButtonTitle: string, //右侧按钮标题
 onRightButtonPress: function, //右侧按钮点击事件
 wrapperStyle: [object Object] //包裹样式
}

(3) itemWrapperStyle: Customize the style for each item, such as setting the background color of each page.
(4) navigationBarHiddent: Hide the navigation bar when true.
(5)shadowHidden: When true, the shadow is hidden.
(6) tintColor: The color of the button on the navigation bar.
(7) titleTextColor: The color of the font on the navigation bar.
(8) translucent: When true, the navigation bar is translucent.

3, Component methods

When the component view is switched, the navigator will be passed as a property object. We can get the navigator object through this.props.navigator. The main methods of this object are as follows:
(1) push(route): Load a new page (view or route) and route to the page.
(2) pop(): Return to the previous page.
(3)popN(n): Return N pages at one time. When N=1, it is equivalent to the effect of the pop() method.
(4)replace(route): Replace the current route.
(5)replacePrevious(route): Replace the view of the previous page and go back to it.
(6) resetTo(route): Replace the top-level route and roll back.
(7) popToTop(): Return to the top view.

2. Usage examples

NavigatorIOS is the navigation component that comes with React Native. The following is its simple application.

Initialize the first scene

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: &#39;初始化第一个场景&#39;,
    }}
    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: &#39;第二个场景&#39;
  });
 }

 render() {
  return (
   <View>
    <Text>Current Scene: { this.props.title }</Text>
    <TouchableHighlight onPress={this._onForward}>
     <Text>前往下一个场景</Text>
    </TouchableHighlight>
   </View>
  )
 }
}

The second scene

export default class NextScene extends Component {

 render() {
  return (
   <View>
    <Text>这是第二个场景</Text>
   </View>
  )
 }
}

Related recommendations:

Detailed encapsulation of React Native vertical carousel component

The above is the detailed content of Simple usage tutorial of NavigatorIOS component in React Native. For more information, please follow other related articles on the PHP Chinese website!