Composant NavigatorIOS dans React Native (description détaillée du didacticiel)

Cet article présente principalement l'utilisation simple et détaillée du composant NavigatorIOS dans React Native. Maintenant, je le partage avec vous et lui donne une référence.

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 c'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: &#39;第二个场景&#39;
  });
 }

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

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile dans le cadre du processus. avenir.

Articles connexes :

Comment implémenter la méthode d'échange de deux valeurs variables en JS

Comment implémenter des instructions personnalisées dans Vue ?

Comment modifier le style du sous-composant via le composant parent dans vue

Lié aux problèmes inter-domaines jsonp dans vue-resource

Comment implémenter le chargement asynchrone de composants dans vue+webpack ?

Utilisez Nginx dans vue.js pour résoudre les problèmes inter-domaines

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!