Рубрики
Без рубрики

Начало работы с реактивной навигацией V1

Научитесь использовать самое зрелое решениеное решение для маршрутизации для реагирования нативных приложений.

Автор оригинала: Spencer Carli.

Существует довольно много вариантов для навигации в реактивном родном. Как правило, я обычно по умолчанию реагирует навигацию ( Учебное пособие по началу работы ) Но это решение для маршрутизации на основе JavaScript. Это может не работать для некоторых людей, а другие могут просто предпочитать родной вариант.

Когда в первую очередь был реагирован в реакцию, единственное навигационное решение было навигатором, но он больше не поддерживается, и он работал только на iOS. Airbnb имеет родную навигацию, но он все еще очень новый.

Вот где приходит актуальная навигация RACT – он использует нативные навигаторы на iOS и Android и легко использовать JavaScript API. Я никогда не использовал его раньше, но не думал, что буду поделиться своим опытом вставать и бежать с ним.

Последний код доступен на Github Отказ

Этот учебник относится к V1 реактивной навальной навигации. Если вы используете V2, API может измениться.

Предпочитаю видео?

Начало работы с реактивной навигацией V1

Монтаж

Чтобы начать создать новый реагировать нативный проект React-Noadient inittytartreactractnativenav Отказ Я тогда собираюсь лечить приложение с несколькими экранами, Что вы можете найти здесь Отказ

Иос

Если ничего не будет работать/иметь смысл, пожалуйста, проверьте Официальная документация Отказ

Откройте проект в Xcode Откройте iOS/gethnstartedreactnativenav.xcodeProj/ Отказ Затем, поскольку это использует нативные библиотеки, вам нужно связать собственные зависимости. Сначала щелкните правой кнопкой мыши «Библиотеки» в Navigator Project и нажмите «Добавить файлы в gethstartedreactnativenav …»

React-Nature-Navigation-Images.png

И выберите Reactnativenavigation.xCodeProj , который можно найти в Node_Modules/React-National-Navigation/iOS/REGINGNATIVIVEGING.xcodeProj Отказ

Сейчас на вкладке «Построение фаз» (видна в верхней части NAVBAR XCODE) в вкладке «Бинар Link с библиотеками» Добавить lib intavnativenavigation.a Отказ

1-nflfcrwfuqu8mq1cj8siva.png.

Затем перейдите на вкладку «Настройки сборки» и ищите «Пути поиска заголовка»

1-l8kazhiymg_bybfa4hbxzq.png.

и добавить $ (Srcroot)/../Node_Modules/React - Nature-Navigation/iOS Отказ Обязательно установите его как «рекурсивный».

3.png.

Теперь нам нужно изменить Appdelegenge.m Отказ

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */

#import "AppDelegate.h"

#import 
+ #import "RCCManager.h"
#import 

@implementation AppDelegate

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
  
+  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
+  self.window.backgroundColor = [UIColor whiteColor];
+  [[RCCManager sharedInstance] initBridgeWithBundleURL:jsCodeLocation];

-  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
-                                                      moduleName:@"GettingStartedReactNativeNav"
-                                               initialProperties:nil
-                                                   launchOptions:launchOptions];
-  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

-  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-  UIViewController *rootViewController = [UIViewController new];
-  rootViewController.view = rootView;
-  self.window.rootViewController = rootViewController;
-  [self.window makeKeyAndVisible];

  return YES;
}

@end

Андроид

Откройте Android/Settings.gradle и добавьте следующее к нему.

include ':react-native-navigation'
project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/android/app/')

Тогда, в Android/App/build.gradle обновите зависимости с Компилировать проект («: React-National-навигация») Отказ Вы также хотите обновить Compitesdkversion и BuildToolsVersion , расположен в Android Отказ

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.1"
    ...
}
 
dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+" 
    compile project(':react-native-navigation') // ADD DEPENDENCY
}

Далее изменить МАЯТАКТИВНОСТЬ.ЯВА

package com.gettingstartedreactnativenav;

- import com.facebook.react.ReactActivity;

- public class MainActivity extends ReactActivity {
-    /**
-     * Returns the name of the main component registered from JavaScript.
-     * This is used to schedule rendering of the component.
-     */
-    @Override
-    protected String getMainComponentName() {
-        return "GettingStartedReactNativeNav";
-    }
-}

+import com.reactnativenavigation.controllers.SplashActivity;

+public class MainActivity extends SplashActivity {
+    
+}

Мы также должны были изменить MainaPlication.java Отказ

package com.gettingstartedreactnativenav;

import android.app.Application;

-import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
+import com.reactnativenavigation.NavigationApplication;

import java.util.Arrays;
import java.util.List;

-public class MainApplication extends Application implements ReactApplication {
+public class MainApplication extends NavigationApplication {

  ...
}

Затем добавьте следующее в корпус MainaPlaphation.java

// ...
import javax.annotation.Nullable;

public class MainApplication extends NavigationApplication {
   //  ...
        
    @Override
    public boolean isDebug() {
        return BuildConfig.DEBUG;
    }

    @Nullable
    @Override
    public List createAdditionalReactPackages() {
        return null;
    }
}

Применение

Реагируйте собственную навигацию, изменяются немного, как реагировать нативные работы (как вы можете сказать по установке). Самое большое значение – это то, как мы регистрируем приложение. Мы больше не используем Accessistry.registerComponent Итак, мы высказались на index.ios.js и index.android.js со следующим

// index.ios.js, index.android.js
import registerApp from './app/index';

registerApp();

Тогда в Приложение/index.js Мы создадим нашу функцию, которая фактически регистрирует приложение.

// app/index.js
import { Navigation } from 'react-native-navigation';

import Screen1 from './screens/Screen1';
import Screen2 from './screens/Screen2';
import Screen3 from './screens/Screen3';
import Screen4 from './screens/Screen4';

export default () => {
  
};

Первое, что мы хотим сделать в этой функции зарегистрировать наши экраны с помощью реактивных навигаций. Мы сделаем это через Навигация. РегистратКомпонент Отказ

// app/index.js

import { Navigation } from 'react-native-navigation';

import Screen1 from './screens/Screen1';
import Screen2 from './screens/Screen2';
import Screen3 from './screens/Screen3';
import Screen4 from './screens/Screen4';

export default () => {
  Navigation.registerComponent('Screen1', () => Screen1);
  Navigation.registerComponent('Screen2', () => Screen2);
  Navigation.registerComponent('Screen3', () => Screen3);
  Navigation.registerComponent('Screen4', () => Screen4);
};

С этим мы можем использовать нашими зарегистрированными экранами с приложением. Мы собираемся настроить приложение на базе вкладок в этом руководстве – который мы делаем через Навигация .startTabbasedApp Отказ Внутри этого конфигурации мы можем пройти массив «вкладки», которые представляют вкладки нашего приложения. Все ключи довольно явно объясняют, поэтому я не буду их покрывать. Полная документация доступна здесь. Единственное, что я отмечу, так это то, что экран должен выровнять с экраном, который мы регистрировали ранее.

Примечание. Я добавил несколько изображений в приложение. Вы можете получить их в репо GitHub.

export default () => {
//   ...

  Navigation.startTabBasedApp({
    tabs: [
      {
        label: 'One',
        screen: 'Screen1',
        icon: require('./images/icon1.png'),
        selectedIcon: require('./images/icon1_selected.png'),
        title: 'Screen One'
      },
      {
        label: 'Two',
        screen: 'Screen2',
        icon: require('./images/icon2.png'),
        selectedIcon: require('./images/icon2_selected.png'),
        title: 'Screen Two'
      }
    ]
  });
};

Это оставляет вас с

4.gif

Навигация между экранами

Чтобы нажать на новый экран на стек очень прост. На экранах, которые были зарегистрированы в навигации, у вас есть доступ к This.props.navigate На котором вы просто хотите «нажать» на него новый экран.

// app/screens/Screen1.js
// ...

class Screen extends Component {
  handlePress = () => {
    this.props.navigator.push({
      screen: 'Screen3',
      title: 'Screen 3',
    });
  };

  render() {
    return (
      
    );
  }
}
5.GIF.

Модаль

Открытие модала так же просто, как нажимать новый экран на стек.

// app/screens/Screen3.js
// ...

class Screen extends Component {
  handlePress = () => {
    this.props.navigator.showModal({
      screen: 'Screen4',
      title: 'Screen 4',
    });
  };

  render() {
    return (
      
    );
  }
}

export default Screen;
6.GIF.

В заключении

Я только что поцарапал поверхность реагирования на навалом навигации, и я взволнован, чтобы узнать больше об этом. Конечно, есть преимущества для того, чтобы идти на родной маршрут, хотя установка может быть болью. Мне интересно увидеть, насколько это гибко, и какие взаимодействия мы можем использовать с ним. До скорого!

Вам понравилось это руководство? Обязательно поделитесь этим, и если вы заинтересованы в том, чтобы увидеть больше, убедитесь, что Зарегистрируйтесь на мой список электронной почты !

Первоначально опубликовано Середина .

Читайте ещё по теме: