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

Android: Navigator. Let’s talk about this later.

2, component properties

(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] //包裹样式
}

(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

(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

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>
  )
 }
}

export default class NextScene extends Component {
 render() {
  return (
   <View>
    <Text>这是第二个场景</Text>
   </View>
  )
 }
}

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!