前沿
说到app，最基本的功能无非导航加上页面跳转，这些都是一个app不可缺少的，之前都是用rn官方提供的navigator亦或者是后来facebook官方承认的另一种navigation方案（react-navigation），但是毕竟都是基于js实现的，说到底还是web之前的切换以及跳转，低端机多多少少还是有些性能影响。今天要深入研究的就是纯粹的原生体验（react-native-navigation），看名称就不难看出此框架完全基于原生android和ios，性能那当然是没话说，目前该框架还处于1.0时代，不过作者已经在着手2.0版本的编写，当然如果想尝新也可以去看下，出于好奇，小编也尝试了一把，由于文档尚未完善，小编没有深入研究，接下来就步入正题！
前期准备
如果打算继续往下看，小编就默认已经安装好node，react-native等等环境，并且能跑起来一个简单的demo了，如下图：
否则，请移步百度，配置好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]
2、添加libReactNativeNavigation.a
点击xcode左面板最顶层的项目名称，然后点击右边面板的Build Phases选项卡，找到Link Binary With Libraries 添加libReactNativeNavigation.a
实际操作：优酷 爱奇艺
3、添加$(SRCROOT)/../node_modules/react-native-navigation/ios
点击xcode左面板最顶层的项目，然后点击右面板的Build Setting选项卡，找到Header Search Paths，添加$(SRCROOT)/../node_modules/react-native-navigation/ios
实际操作：优酷 爱奇艺
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
到此为止就介绍了react-native-navigation在android和ios上的完整配置，接下来的文章就是介绍react-native-navigation的具体应用了，由于诸多原因，接下来的教程都是基于windows平台，介绍android的用法，其实ios基本上类似，稍微变通即可！
