Detailed explanation of the use of NavigatorIOS components

This time I will bring you a detailed explanation of the use of the NavigatorIOS component. What are the precautions when using the NavigatorIOS component? The following is a practical case, let's take a look.

1. Introduction to NavigatorIOS components

1, component description

Using NavigatorIOS we can implement application navigation (routing) Function, 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 Example

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: '第二个场景'
  });
 }
 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>
  )
 }
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related matters on the php Chinese website article!

Recommended reading:

JS method to obtain the top N color values ​​​​of an image

Detailed explanation of graphics and text using the render method

The applet uses .getImageInfo() to obtain image information

The above is the detailed content of Detailed explanation of the use of NavigatorIOS components. For more information, please follow other related articles on the PHP Chinese website!