NavigatorIOS component in React Native (detailed tutorial description)

This article mainly introduces the simple use of the NavigatorIOS component in React Native. Now I will share it with you and give you a reference.

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: '初始化第一个场景',
    }}
    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>
  )
 }
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement the exchange method of two variable values ​​in JS

How to implement custom instructions in Vue ?

How to modify the sub-component style through the parent component in vue

Related to jsonp cross-domain issues in vue-resource

How to implement asynchronous component loading in vue webpack?

Use Nginx in vue.js to solve cross-domain issues

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