react-native
Navigator-Best Practices

Navigator

Navigator ist der Standardnavigator von React Native. Eine Navigator Komponente verwaltet einen Stapel von Routenobjekten und stellt Methoden zum Verwalten dieses Stapels bereit.

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

Routenstapel verwalten

initialRoute die initialRoute . Eine Route ist einfach ein Javascript-Objekt und kann die gewünschte Form und die gewünschten Werte annehmen. Dies ist die primäre Methode, mit der Sie Werte und Methoden zwischen Komponenten in Ihrem Navigationsstapel übergeben.

Der Navigator weiß basierend auf dem von seiner renderScene zurückgegebenen Wert, was 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
  }
}

Stellen wir uns eine Implementierung von ExampleScene in diesem Beispiel vor:

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

Navigator konfigurieren

Sie können die Übergänge des Navigator mit der configureScene Eigenschaft configureScene . Dies ist eine Funktion, die übergeben wird route Objekt und muss ein Konfigurationsobjekt zurückzukehren. Dies sind die verfügbaren Konfigurationsobjekte:

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

Sie können eines dieser Objekte ohne Änderung zurückgeben oder das Konfigurationsobjekt ändern, um die Navigationsübergänge anzupassen. So können Sie beispielsweise die Breite des UINavigationController ändern, um den interactivePopGestureRecognizer iOS UINavigationController genauer zu emulieren:

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

Verwalten der Navigationsleiste

Die Navigator Komponente wird mit einer navigationBar Komponente geliefert, die theoretisch jede ordnungsgemäß konfigurierte React-Komponente aufnehmen kann. Die häufigste Implementierung verwendet jedoch die Standardeinstellung Navigator.NavigationBar . Dies routeMapper eine routeMapper , mit der Sie das Erscheinungsbild der Navigationsleiste basierend auf der Route konfigurieren können.

Ein routeMapper ist ein routeMapper Javascript-Objekt mit drei Funktionen: Title , RightButton und LeftButton . Zum Beispiel:

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

Mehr sehen

Weitere Informationen zu den einzelnen Requisiten finden Sie in der offiziellen React Native-Dokumentation für Navigator und im React Native-Handbuch zum Verwenden von Navigatoren .

Verwenden Sie die reag-navigation für die Navigation in reaktiven nativen Apps

Mit der reag-navigation können Sie Ihrer App ganz einfach eine Navigation hinzufügen.

Install-Navigation installieren

npm install --save react-navigation

Beispiel:

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

reaktives Navigieren mit reaktativem Router-Fluss

Installieren Sie mit npm install --save react-native-router-flux

In reaktativem Router-Fluss wird jede Route als <Scene>

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

key Eine eindeutige Zeichenfolge, mit der auf die jeweilige Szene verwiesen werden kann.

component Welche Komponente soll angezeigt werden, hier ist es

title Machen Sie eine NavBar und geben Sie einen Titel "Home"

initial Ist dies der erste Bildschirm der App

Beispiel:

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;

Importieren Sie diese Datei in die Haupt-App.js (Indexdatei) und rendern Sie sie. Für weitere Informationen besuchen Sie diesen Link .