react-native
Best practice di Navigator

Navigatore

Navigator è il navigatore predefinito di React Native. Un componente Navigator gestisce uno stack di oggetti route e fornisce metodi per la gestione di tale stack.

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

Gestire la pila di percorsi

Prima di tutto, notare initialRoute prop. Un percorso è semplicemente un oggetto javascript e può assumere qualsiasi forma tu voglia e avere qualsiasi valore tu voglia. È il modo principale per passare valori e metodi tra i componenti nello stack di navigazione.

Il Navigator sa cosa renderizzare in base al valore restituito dal suo oggetto 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
  }
}

Immaginiamo un'implementazione di ExampleScene in questo esempio:

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

Configurazione del Navigatore

È possibile configurare le transizioni di Navigator con il puntello configureScene . Questa è una funzione che ha passato l'oggetto route e deve restituire un oggetto di configurazione. Questi sono gli oggetti di configurazione disponibili:

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

È possibile restituire uno di questi oggetti senza modifiche oppure modificare l'oggetto di configurazione per personalizzare le transizioni di navigazione. Ad esempio, per modificare la larghezza del taglio del margine per emulare più da vicino l' interactivePopGestureRecognizer UINavigationController :

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

Gestire il NavigationBar

Il componente Navigator dotato di un puntello di navigationBar , che in teoria può assumere qualsiasi componente React configurato correttamente. Ma l'implementazione più comune utilizza il Navigator.NavigationBar predefinito. Questo richiede un routeMapper puntello che è possibile utilizzare per configurare l'aspetto della barra di navigazione sulla base del percorso.

Un routeMapper è un normale oggetto javascript con tre funzioni: Title , RightButton e LeftButton . Per esempio:

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

Vedi altro

Per una documentazione più dettagliata di ogni sostegno, consultare la documentazione ufficiale React Native per Navigator e la guida React Native sull'uso dei navigatori .

Usa reatt-navigation per la navigazione nelle applicazioni native reattive

Con l'aiuto di react-navigation , puoi aggiungere facilmente la navigazione alla tua app.

Installa reatt-navigation

npm install --save react-navigation

Esempio:

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

react-native Navigation con react-native-router-flux

Installa utilizzando npm install --save react-native-router-flux

In react-native-router-flux, ogni route è chiamato <Scene>

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

key Una stringa univoca che può essere utilizzata per fare riferimento alla scena specifica.

component Quale componente mostrare, eccolo qui

title crea un NavBar e dagli un titolo "Home"

initial È questa la prima schermata dell'app

Esempio:

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;

Importa questo file nel file App.js principale (file indice) e eseguilo. Per maggiori informazioni puoi visitare questo link .