react-native
Meilleures pratiques du navigateur

Navigateur

Navigator est le navigateur par défaut de React Native. Un composant Navigator gère une pile d'objets route et fournit des méthodes pour gérer cette pile.

<Navigator
  ref={(navigator) => { this.navigator = navigator }}
  initialRoute={{ id: 'route1', title: 'Route 1' }}
  renderScene={this.renderScene.bind(this)}
  configureScene={(route) => Navigator.SceneConfigs.FloatFromRight}
  style={{ flex: 1 }}
  navigationBar={
    // see "Managing the Navigation Bar" below
    <Navigator.NavigationBar routeMapper={this.routeMapper} /> 
  }
/>

Gestion de la pile de route

Tout d’abord, notez l’accessoire initialRoute . Une route est simplement un objet javascript, et peut prendre la forme que vous voulez et avoir les valeurs que vous voulez. C'est la principale manière de transmettre des valeurs et des méthodes entre les composants de votre pile de navigation.

Le Navigator sait quoi restituer en fonction de la valeur renvoyée par son outil renderScene .

renderScene(route, navigator) {
  if (route.id === 'route1') {
    return <ExampleScene navigator={navigator} title={route.title} />; // see below
  } else if (route.id === 'route2') {
    return <ExampleScene navigator={navigator} title={route.title} />; // see below
  }
}

Imaginons une implémentation de ExampleScene dans cet exemple:

function ExampleScene(props) {

  function forward() {
    // this route object will passed along to our `renderScene` function we defined above.
    props.navigator.push({ id: 'route2', title: 'Route 2' });
  }

  function back() {
    // `pop` simply pops one route object off the `Navigator`'s stack
    props.navigator.pop();
  }

  return (
    <View>
      <Text>{props.title}</Text>
      <TouchableOpacity onPress={forward}>
        <Text>Go forward!</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={back}>
        <Text>Go Back!</Text>
      </TouchableOpacity>
    </View>
  );
}

Configuration du navigateur

Vous pouvez configurer les transitions du Navigator avec le composant configureScene . Ceci est une fonction qui a passé l'objet route et doit retourner un objet de configuration. Voici les objets de configuration disponibles:

• Navigator.SceneConfigs.PushFromRight (par défaut)
• Navigator.SceneConfigs.FloatFromRight
• Navigator.SceneConfigs.FloatFromLeft
• Navigator.SceneConfigs.FloatFromBottom
• Navigator.SceneConfigs.FloatFromBottomAndroid
• Navigator.SceneConfigs.FadeAndroid
• Navigator.SceneConfigs.HorizontalSwipeJump
• Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
• Navigator.SceneConfigs.VerticalUpSwipeJump
• Navigator.SceneConfigs.VerticalDownSwipeJump

Vous pouvez renvoyer l'un de ces objets sans modification ou modifier l'objet de configuration pour personnaliser les transitions de navigation. Par exemple, pour modifier la largeur des UINavigationController aux bords pour émuler plus étroitement le UINavigationController interactivePopGestureRecognizer UINavigationController iOS:

configureScene={(route) => {
  return {
    ...Navigator.SceneConfigs.FloatFromRight,
    gestures: {
      pop: {
        ...Navigator.SceneConfigs.FloatFromRight.gestures.pop,
        edgeHitWidth: Dimensions.get('window').width / 2,
      },
    },
  };
}}

Gestion de la barre de navigation

Le composant Navigator est fourni avec un élément de navigationBar qui peut théoriquement prendre tout composant React correctement configuré. Mais l'implémentation la plus courante utilise le Navigator.NavigationBar par défaut. Cela prend un accessoire de routeMapper que vous pouvez utiliser pour configurer l'apparence de la barre de navigation en fonction de l'itinéraire.

Un routeMapper est un objet JavaScript classique avec trois fonctions: Title , RightButton et LeftButton . Par exemple:

const routeMapper = {

  LeftButton(route, navigator, index, navState) {
    if (index === 0) {
      return null;
    }

    return (
      <TouchableOpacity
        onPress={() => navigator.pop()}
        style={styles.navBarLeftButton}
      >
        <Text>Back</Text>
      </TouchableOpacity>
    );
  },

  RightButton(route, navigator, index, navState) {
    return (
      <TouchableOpacity
        onPress={route.handleRightButtonClick}
        style={styles.navBarRightButton}
      >
        <Text>Next</Text>
      </TouchableOpacity>
   );
  },

  Title(route, navigator, index, navState) {
    return (
      <Text>
        {route.title}
      </Text>
    );
  },
};

Voir plus

Pour une documentation plus détaillée de chaque accessoire, consultez la documentation officielle React pour Navigator et le guide React Native sur l' utilisation des navigateurs .

Utiliser rea-navigation pour naviguer dans les applications natives de réaction

Avec l'aide de react-navigation , vous pouvez ajouter très facilement la navigation à votre application.

Installer react-navigation

npm install --save react-navigation

Exemple:

import { Button, View, Text, AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';

const App = StackNavigator({
  FirstPage: {screen: FirstPage},
  SecondPage: {screen: SecondPage},
});

class FirstPage extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;

    return (
      <Button
        title='Go to Second Page'
        onPress={() =>
          navigate('SecondPage', { name: 'Awesomepankaj' })
        }
      />
    );
  }
}

class SecondPage extends React.Component {
  static navigationOptions = ({navigation}) => ({
    title: navigation.state.params.name,
  });

  render() {
    const { goBack } = this.props.navigation;
    return (
      <View>
        <Text>Welcome to Second Page</Text>
        <Button
          title="Go back to First Page"
          onPress={() => goBack()}
        />
      </View>
    );
  }
}

Navigation ré-native avec react-native-router-flux

Installez en utilisant npm install --save react-native-router-flux

Dans rea-native-routeur-flux, chaque route est appelée <Scene>

<Scene key="home" component={LogIn} title="Home" initial />

key Chaîne unique pouvant être utilisée pour faire référence à la scène particulière.

component Quel composant montrer, ici c'est

title faire un NavBar et lui donner un titre 'Home'

initial Est-ce le premier écran de l'application

Exemple:

import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import LogIn from './components/LogIn';
import SecondPage from './components/SecondPage';

const RouterComponent = () => {
  return (
    <Router>
      <Scene key="login" component={LogIn} title="Login Form" initial />
      <Scene key="secondPage" component={SecondPage} title="Home" />
    </Router>
  );
};

export default RouterComponent;

Importez ce fichier dans le fichier principal App.js (fichier d'index) et rendez-le. Pour plus d'informations, visitez ce lien .