Tutoriel d'utilisation simple du composant NavigatorIOS dans React Native

Cet article présente principalement l'utilisation simple et détaillée du composant NavigatorIOS dans React Native. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

1. Introduction aux composants NavigatorIOS

1. Description des composants

Utilisation NavigateurIOS Nous pouvons implémenter la fonction de navigation (routage) de l'application, 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éthode du composant

Lorsque la vue du composant est changée, le navigateur sera transmis 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.

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

Recommandations associées :

Emballage détaillé du composant de carrousel vertical React Native

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!