NavigatorIOS-Komponente in React Native (ausführliche Tutorialbeschreibung)

Dieser Artikel stellt hauptsächlich die einfache und detaillierte Verwendung der NavigatorIOS-Komponente in React Native vor. Jetzt teile ich ihn mit Ihnen und gebe ihm eine Referenz.

1. Einführung in NavigatorIOS-Komponenten

1. Komponentenbeschreibung

Mit NavigatorIOS können wir die Anwendungsnavigation (Routing) implementieren. Funktion, also das Umschalten zwischen Ansichten und das Vor- und Zurückbewegen. 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 haben: 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, indem Sie beispielsweise die Hintergrundfarbe jeder Seite festlegen.
(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. Komponentenmethoden

Beim Umschalten der Komponentenansicht 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.

Initialisieren Sie die erste Szene

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

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

So implementieren Sie die Austauschmethode zweier Variablenwerte in JS

So implementieren Sie benutzerdefinierte Anweisungen in Vue?

So ändern Sie den Unterkomponentenstil über die übergeordnete Komponente in Vue

Bezieht sich auf domänenübergreifende JSONP-Probleme in Vue-Ressource

Wie implementiert man das asynchrone Laden von Komponenten in vue+webpack?

Verwenden Sie Nginx in vue.js, um domänenübergreifende Probleme zu lösen

Das obige ist der detaillierte Inhalt vonNavigatorIOS-Komponente in React Native (ausführliche Tutorialbeschreibung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!