Einfaches Tutorial zur Verwendung der NavigatorIOS-Komponente in React Native

In diesem Artikel wird hauptsächlich die einfache und detaillierte Verwendung der NavigatorIOS-Komponente in React Native vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Einführung in NavigatorIOS-Komponenten

1. Komponentenbeschreibung

Verwendung NavigatorIOS Wir können die Navigationsfunktion (Routing) der Anwendung implementieren, dh zwischen Ansichten wechseln und vorwärts und rückwärts bewegen. Und oben auf der Seite wird es eine Navigationsleiste geben (kann ausgeblendet werden).

Die NavigatorIOS-Komponente ist im Wesentlichen ein Wrapper für die UIKit-Navigation. Die Verwendung von NavigatorIOS zum Wechseln von Routen ruft tatsächlich die Navigation von UIKit auf.

Die NavigatorIOS-Komponente unterstützt nur das iOS-System. React Native bietet außerdem eine Navigationskomponente, die sowohl iOS als auch Android gemeinsam hat: Navigator. Lassen Sie uns später darüber sprechen.

2, Komponenteneigenschaften

(1) barTintColor: Hintergrundfarbe der Navigationsleiste
(2) initialRoute: wird zum Initialisieren des Routings verwendet. Die verschiedenen Attribute in seinem Parameterobjekt lauten wie folgt:

{
 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: Passen Sie den Stil für jedes Element an, z. B. Festlegen der Hintergrundfarbe jeder Seite .
(4) navigationBarHiddent: Blendet die Navigationsleiste aus, wenn true.
(5)shadowHidden: Wenn true, ist der Schatten ausgeblendet.
(6) tintColor: Die Farbe der Schaltfläche in der Navigationsleiste.
(7) titleTextColor: Die Farbe der Schriftart in der Navigationsleiste.
(8) durchscheinend: Wenn „true“, ist die Navigationsleiste durchscheinend.

3, Komponentenmethode

Wenn die Komponentenansicht umgeschaltet wird, wird der Navigator als Eigenschaftsobjekt übergeben. Wir können das Navigatorobjekt über this.props.navigator abrufen. Die Hauptmethoden dieses Objekts sind wie folgt:
(1) push(route): Eine neue Seite laden (Ansicht oder Route) und zur Seite weiterleiten.
(2) pop(): Zurück zur vorherigen Seite.
(3) popN(n): N Seiten gleichzeitig zurückgeben. Wenn N = 1 ist, entspricht dies dem Effekt der Methode pop ().
(4) replace(route): Ersetzt die aktuelle Route.
(5) replacePrevious(route): Ersetzen Sie die Ansicht der vorherigen Seite und kehren Sie dorthin zurück.
(6) resetTo(route): Ersetzen Sie die Route der obersten Ebene und führen Sie einen Rollback durch.
(7) popToTop(): Zurück zur Draufsicht.

2. Anwendungsbeispiele

NavigatorIOS ist die Navigationskomponente, die mit React Native geliefert wird. Das Folgende ist seine einfache Anwendung.

Erste Szene initialisieren

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

Die zweite Szene

export default class NextScene extends Component {

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

Verwandte Empfehlungen:

Detaillierte Verpackung der vertikalen Karussellkomponente von React Native

Das obige ist der detaillierte Inhalt vonEinfaches Tutorial zur Verwendung der NavigatorIOS-Komponente in React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!