Explication détaillée de l'utilisation des composants NavigatorIOS

Cette fois je vais vous apporter une explication détaillée de l'utilisation du composant NavigatorIOS, et quelles sont les précautions d'utilisation du composant NavigatorIOS Voici un cas pratique, allons-y. jetez un oeil.

1. Introduction aux composants NavigatorIOS

1. Description des composants

En utilisant NavigatorIOS, nous pouvons implémenter la navigation d'application (routage) Fonction, c'est-à-dire basculer entre les vues et avancer et reculer. Et il y aura une barre de navigation en haut de la page (peut être masquée).

Le composant NavigatorIOS est essentiellement un wrapper pour la navigation UIKit. Utiliser NavigatorIOS pour changer d'itinéraire appelle en fait la navigation d'UIKit.

Le composant NavigatorIOS prend uniquement en charge le système iOS. React Native fournit également un composant de navigation commun à iOS et Android : Navigator. Parlons-en plus tard.

2, propriétés du composant

(1) barTintColor : couleur de fond de la barre de navigation
(2) initialRoute : utilisé pour initialiser le routage. Les différents attributs de son objet paramètre sont les suivants :

{
 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 : personnalisez le style de chaque élément, par exemple en définissant la couleur d'arrière-plan de chaque page.
(4) navigationBarHiddent : masque la barre de navigation lorsque cela est vrai.
(5) shadowHidden : Lorsque c'est vrai, l'ombre est masquée.
(6) tintColor : La couleur du bouton sur la barre de navigation.
(7) titleTextColor : La couleur de la police sur la barre de navigation.
(8) translucide : Lorsque c'est vrai, la barre de navigation est translucide.

3. Méthodes des composants

Lorsque la vue du composant est changée, le navigateur sera passé en tant qu'objet de propriété. Nous pouvons obtenir l'objet navigateur via this.props.navigator. Les principales méthodes de cet objet sont les suivantes :
(1) push(route) : Charge une nouvelle page (vue ou itinéraire) et route vers la page.
(2) pop() : Retour à la page précédente.
(3) popN(n) : renvoie N pages à la fois. Lorsque N=1, cela équivaut à l’effet de la méthode pop().
(4) replace(route) : Remplace l'itinéraire actuel.
(5) replacePrevious(route) : Remplacez la vue de la page précédente et revenez-y.
(6) resetTo(route) : remplacez l'itinéraire de niveau supérieur et revenez en arrière.
(7) popToTop() : Retour à la vue de dessus.

2. Exemples d'utilisation

NavigatorIOS est le composant de navigation fourni avec React Native. Voici son application simple.

Initialiser la première scène

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

La deuxième scène

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

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article Pour des choses plus excitantes. , veuillez faire attention à php Autres articles connexes sur le site chinois !

Lecture recommandée :

Méthode JS pour obtenir les N premières valeurs de couleur d'une image

Explication détaillée de graphiques et texte à l'aide de la méthode de rendu

L'applet utilise .getImageInfo() pour obtenir des informations sur l'image

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!