Ausführliche Erläuterung der Verwendung der NavigatorIOS-Komponenten

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendung der NavigatorIOS-Komponente und der Vorsichtsmaßnahmen für die Verwendung der NavigatorIOS-Komponente geben. Hier ist ein praktischer Fall Schauen Sie mal rein.

1. Einführung in NavigatorIOS-Komponenten

1. Komponentenbeschreibung

Mit NavigatorIOS können wir 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 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. das 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. 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: '第二个场景'
  });
 }
 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>
  )
 }
}

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Dinge Bitte achten Sie auf PHP Weitere verwandte Artikel auf der chinesischen Website!

Empfohlene Lektüre:

JS-Methode zum Erhalten der Top-N-Farbwerte eines Bildes

Detaillierte Erklärung von Grafiken und Text mit der Render-Methode

Das Applet verwendet .getImageInfo(), um Bildinformationen zu erhalten

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung der NavigatorIOS-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!