react-native
Best practices voor Navigator

Navigator

Navigator is de standaardnavigator van React Native. Een Navigator component beheert een stapel route-objecten en biedt methoden voor het beheer van die stapel.

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

Beheer van de routestapel

initialRoute op de initialRoute prop. Een route is gewoon een javascript-object en kan elke gewenste vorm aannemen en elke gewenste waarde hebben. Het is de primaire manier om waarden en methoden tussen componenten in uw navigatiestapel door te geven.

De Navigator weet wat hij moet renderen op basis van de waarde die wordt geretourneerd door zijn renderScene prop.

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

Laten we ons in dit voorbeeld een implementatie van ExampleScene voorstellen:

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

Configureren van de Navigator

U kunt de overgangen van de Navigator configureScene met de configureScene prop. Dit is een functie die het route object is gepasseerd en een configuratieobject moet retourneren. Dit zijn de beschikbare configuratieobjecten:

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

U kunt een van deze objecten zonder aanpassing retourneren, of u kunt het configuratieobject wijzigen om de navigatie-overgangen aan te passen. Om bijvoorbeeld de breedte van de UINavigationController te wijzigen om de iOS UINavigationController interactivePopGestureRecognizer beter te emuleren:

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

Beheer van de navigatiebalk

De Navigator component wordt geleverd met een navigationBar prop, die theoretisch elke correct geconfigureerde React-component kan dragen. Maar de meest voorkomende implementatie maakt gebruik van de standaard Navigator.NavigationBar . Hiervoor is een routeMapper prop nodig die u kunt gebruiken om het uiterlijk van de navigatiebalk op basis van de route te configureren.

Een routeMapper is een regulier JavaScript-object met drie functies: Title , RightButton en LeftButton . Bijvoorbeeld:

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

Bekijk meer

Voor meer gedetailleerde documentatie van elke prop, zie de officiële React Native documentatie voor Navigator en de React Native gids over het gebruik van Navigators .

Gebruik react-navigatie voor navigatie in react native apps

Met behulp van react-navigation kun je heel eenvoudig navigatie aan je app toevoegen.

React-navigatie installeren

npm install --save react-navigation

Voorbeeld:

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 Navigatie met react-native-router-flux

Installeren met behulp van npm install --save react-native-router-flux

In react-native-router-flux wordt elke route een <Scene>

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

key Een unieke string die kan worden gebruikt om naar de specifieke scène te verwijzen.

component Welke component om te tonen, hier is het

title maak een NavBar en geef het een titel 'Home'

initial Is dit het eerste scherm van de app

Voorbeeld:

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;

Importeer dit bestand in het hoofdapp.js (indexbestand) en geef het weer. Voor meer informatie kunt u deze link bezoeken.