react-native
Навигатор наилучшей практики

навигатор

Navigator - это навигатор по умолчанию React Native. Компонент Navigator управляет стеком объектов маршрута и предоставляет методы управления этим стеком.

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

Управление стеком маршрутов

Прежде всего обратите внимание на initialRoute prop. Маршрут - это просто объект javascript и может принимать любую форму, которую вы хотите, и иметь любые значения, которые вы хотите. Это основной способ передачи значений и методов между компонентами в вашем стеке навигации.

Navigator знает, что делать на основе значения, возвращаемого с помощью 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
  }
}

Представим себе реализацию ExampleScene в этом примере:

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 с помощью configureScene . Это функция, которая передала объект route и должна вернуть объект конфигурации. Это доступные объекты конфигурации:

• Navigator.SceneConfigs.PushFromRight (по умолчанию)
• 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

Вы можете вернуть один из этих объектов без изменений, или вы можете изменить объект конфигурации для настройки переходов навигации. Например, чтобы изменить ширину ударов по краям, чтобы более точно подражать interactivePopGestureRecognizer UINavigationController iOS UINavigationController : interactivePopGestureRecognizer :

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

Управление навигационной панелью

Компонент Navigator поставляется с поддержкой navigationBar , который теоретически может использовать любой правильно сконфигурированный компонент React. Но в наиболее распространенной реализации используется Navigator.NavigationBar по умолчанию. Для этого требуется routeMapper которую вы можете использовать для настройки внешнего вида навигационной панели на основе маршрута.

routeMapper - обычный объект javascript с тремя функциями: Title , RightButton и LeftButton . Например:

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

Узнать больше

Более подробную документацию по каждой опоре можно найти в официальной справочной книге React Native Documentation for Navigator и руководстве React Native по использованию навигаторов .

Используйте интерактивную навигацию для навигации в реальных приложениях

С помощью интерактивной навигации вы можете легко добавлять навигацию к своему приложению.

Установка реакции-навигации

npm install --save react-navigation

Пример:

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

реагировать-навигация Навигация с реакцией-native-router-flux

Установите с помощью npm install --save react-native-router-flux

В реакции-native-router-flux каждый маршрут называется <Scene>

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

key Уникальная строка, которая может использоваться для ссылки на конкретную сцену.

component Какой компонент для показа, вот он

title сделать NavBar и дать ему титул «Главная»

initial Это первый экран приложения

Пример:

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;

Импортируйте этот файл в основной файл App.js (индексный файл) и отрисуйте его. Для получения дополнительной информации посетите эту ссылку .