前沿

说到app，最基本的功能无非导航加上页面跳转，这些都是一个app不可缺少的，之前都是用rn官方提供的navigator亦或者是后来facebook官方承认的另一种navigation方案（react-navigation），但是毕竟都是基于js实现的，说到底还是web之前的切换以及跳转，低端机多多少少还是有些性能影响。今天要深入研究的就是纯粹的原生体验（react-native-navigation），看名称就不难看出此框架完全基于原生android和ios，性能那当然是没话说，目前该框架还处于1.0时代，不过作者已经在着手2.0版本的编写，当然如果想尝新也可以去看下，出于好奇，小编也尝试了一把，由于文档尚未完善，小编没有深入研究，接下来就步入正题！

前期准备

如果打算继续往下看，小编就默认已经安装好node，react-native等等环境，并且能跑起来一个简单的demo了，如下图：

image.png

否则，请移步百度，配置好rn的运行环境！

安装react-native-navigation

react-native-navigation插件的安装跟其他的没什么差异，捅过npm或者yarn安装即可。

npm install react-native-navigation@latest --save
// 或者 yarn add react-native-navigation@latest

安装完成切勿急着运行项目，因为你什么效果都看不到，接下来就一起看看在android和ios上如何配置项目。

一、android配置

1、修改 android/settings.gradle

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

实际操作：优酷 爱奇艺

2、修改android/app/build.gradle

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

实际操作：优酷 爱奇艺

3、修改android/app/src/main/java/com/yourproject/MainActivity.java

import com.reactnativenavigation.controllers.SplashActivity;

 public class MainActivity extends SplashActivity {

 }

实际操作：优酷 爱奇艺

4、修改MainApplication.java

import com.reactnativenavigation.NavigationApplication;

 public class MainApplication extends NavigationApplication {

     @Override
     public boolean isDebug() {
         // Make sure you are using BuildConfig from your own application
         return BuildConfig.DEBUG;
     }

     protected List<ReactPackage> getPackages() {
         // Add additional packages you require here
         // No need to add RnnPackage and MainReactPackage
         return Arrays.<ReactPackage>asList(
             // eg. new VectorIconsPackage()
         );
     }

     @Override
     public List<ReactPackage> createAdditionalReactPackages() {
         return getPackages();
     }
 }

实际操作：优酷 爱奇艺
到这里，android的配置就完成了，然而这时候还是不能直接运行项目，会报错！

IOS配置

1、添加react-native-navigation库到libraries

右键单击xcode左边的libraries > Add files to [project name]

image.png

实际操作：优酷 爱奇艺

2、添加libReactNativeNavigation.a

点击xcode左面板最顶层的项目名称，然后点击右边面板的Build Phases选项卡，找到Link Binary With Libraries 添加libReactNativeNavigation.a

image.png
实际操作：优酷 爱奇艺

3、添加$(SRCROOT)/../node_modules/react-native-navigation/ios

点击xcode左面板最顶层的项目，然后点击右面板的Build Setting选项卡，找到Header Search Paths，添加$(SRCROOT)/../node_modules/react-native-navigation/ios

image.png
实际操作：优酷 爱奇艺

4、修改AppDelegate.m文件

找到项目中AppDelegate.m完全替换成如下：

#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>

// **********************************************
// *** DON'T MISS: THE NEXT LINE IS IMPORTANT ***
// **********************************************
#import "RCCManager.h"

// IMPORTANT: if you're getting an Xcode error that RCCManager.h isn't found, you've probably ran "npm install"
// with npm ver 2. You'll need to "npm install" with npm 3 (see https://github.com/wix/react-native-navigation/issues/1)

#import <React/RCTRootView.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;
#ifdef DEBUG
//  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
#else
   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif


  // **********************************************
  // *** DON'T MISS: THIS IS HOW WE BOOTSTRAP *****
  // **********************************************
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  self.window.backgroundColor = [UIColor whiteColor];
  [[RCCManager sharedInstance] initBridgeWithBundleURL:jsCodeLocation launchOptions:launchOptions];

  /*
  // original RN bootstrap - remove this part
  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"example"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  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 

image.png

实际操作：优酷 爱奇艺

到此为止就介绍了react-native-navigation在android和ios上的完整配置，接下来的文章就是介绍react-native-navigation的具体应用了，由于诸多原因，接下来的教程都是基于windows平台，介绍android的用法，其实ios基本上类似，稍微变通即可！