react-native
Navigator Best Practices

Nawigator

Navigator jest domyślnym nawigatorem Navigator React Native. Komponent Navigator zarządza stosem obiektów trasy i zapewnia metody zarządzania tym stosem.

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

Zarządzanie stosem tras

Przede wszystkim zwróć uwagę na initialRoute propozycję initialRoute . Trasa jest po prostu obiektem javascript i może przybierać dowolne kształty oraz dowolne wartości. Jest to podstawowy sposób przekazywania wartości i metod między komponentami na stosie nawigacyjnym.

Navigator wie, co należy renderować, na podstawie wartości zwróconej z jego 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
  }
}

Wyobraźmy sobie implementację ExampleScene w tym przykładzie:

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

Konfigurowanie nawigatora

Możesz skonfigurować przejścia Navigator za pomocą rekwizytu configureScene . Jest to funkcja, która przekazała obiekt route i musi zwrócić obiekt konfiguracji. Oto dostępne obiekty konfiguracji:

• Navigator.SceneConfigs.PushFromRight (domyślnie)
• 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

Możesz zwrócić jeden z tych obiektów bez modyfikacji lub zmodyfikować obiekt konfiguracji, aby dostosować przejścia nawigacji. Na przykład, aby zmodyfikować szerokość uderzenia krawędzi, aby ściślej emulować interactivePopGestureRecognizer UINavigationController systemu iOS:

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

Zarządzanie paskiem nawigacji

Komponent Navigator jest dostarczany z rekwizytem navigationBar , który teoretycznie może przyjąć każdy poprawnie skonfigurowany komponent React. Ale najpopularniejsza implementacja używa domyślnego Navigator.NavigationBar . Pobiera to propozycję routeMapper , której można użyć do skonfigurowania wyglądu paska nawigacji na podstawie trasy.

routeMapper to zwykły obiekt javascript z trzema funkcjami: Title , RightButton i LeftButton . Na przykład:

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

Zobacz więcej

Aby uzyskać bardziej szczegółową dokumentację każdego rekwizytu, zobacz oficjalną dokumentację React Native dla Navigator oraz przewodnik React Native dotyczący korzystania z nawigatorów .

Użyj reagującej nawigacji do nawigacji w reagujących aplikacjach natywnych

Za pomocą reagującej nawigacji możesz bardzo łatwo dodać nawigację do swojej aplikacji.

Zainstaluj nawigację reagującą

npm install --save react-navigation

Przykład:

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

reaguj-natywna nawigacja z strumieniem-reaguj-natywny-router

Zainstaluj za pomocą npm install --save react-native-router-flux

W strumieniu React-Native-Router każda trasa nosi nazwę <Scene>

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

key Unikalny ciąg znaków, którego można użyć do odniesienia do konkretnej sceny.

component Który składnik pokazać, oto jest

title utwórz pasek nawigacyjny i nadaj mu tytuł „Strona główna”

initial Czy to pierwszy ekran aplikacji

Przykład:

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;

Zaimportuj ten plik do głównego pliku App.js (plik indeksu) i wyrenderuj go. Aby uzyskać więcej informacji, odwiedź ten link .