react-native
Mejores Prácticas de Navegador

Navegador

Navigator es el navegador predeterminado de React Native. Un componente Navigator administra una pila de objetos de ruta y proporciona métodos para administrar esa pila.

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

Gestión de la pila de ruta

En primer lugar, observe el prop initialRoute . Una ruta es simplemente un objeto javascript y puede tomar la forma que desee y tener los valores que desee. Es la forma principal de pasar valores y métodos entre los componentes de la pila de navegación.

El Navigator sabe qué representar en función del valor devuelto por su prop 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
  }
}

Imaginemos una implementación de ExampleScene en este ejemplo:

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

Configurando el navegador

Puede configurar las transiciones del Navigator con la opción configureScene prop. Esta es una función que pasa el objeto de route y necesita devolver un objeto de configuración. Estos son los objetos de configuración disponibles:

• Navigator.SceneConfigs.PushFromRight (predeterminado)
• 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

Puede devolver uno de estos objetos sin modificación, o puede modificar el objeto de configuración para personalizar las transiciones de navegación. Por ejemplo, para modificar la anchura hit borde para emular más de cerca el iOS UINavigationController 's interactivePopGestureRecognizer :

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

Manejando la barra de navegación

El componente Navigator viene con un prop de barra de navigationBar , que teóricamente puede tomar cualquier componente React configurado correctamente. Pero la implementación más común utiliza el Navigator.NavigationBar predeterminado. Esto requiere un prop de routeMapper que puede usar para configurar el aspecto de la barra de navegación según la ruta.

Un routeMapper es un objeto javascript normal con tres funciones: Title , RightButton y LeftButton . Por ejemplo:

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

Ver más

Para obtener una documentación más detallada de cada propuesta, consulte la documentación oficial de React Native para el Navigator y la guía de React Native sobre el uso de los navegadores .

Utilice react-navigation para navegar en reaccionar aplicaciones nativas

Con la ayuda de react-navigation , puede agregar la navegación a su aplicación realmente fácil.

Instalar react-navigation

npm install --save react-navigation

Ejemplo:

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

navegación nativa de reacción con flujo de enrutador nativo de reacción

Instale usando npm install --save react-native-router-flux

En react-native-router-flux, cada ruta se denomina <Scene>

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

key Una cadena única que se puede usar para referirse a la escena en particular.

component que componente mostrar, aquí está

title crea una barra de navegación y dale un título 'Inicio'

initial ¿Es esta la primera pantalla de la aplicación?

Ejemplo:

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;

Importe este archivo en el App.js principal (archivo de índice) y renderícelo. Para más información puede visitar este enlace .