视觉码农react-native经验之谈全栈工程师

react-native-navigation步步深入之Andr

2017-10-18  本文已影响213人  Swimly

前沿

说到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基本上类似,稍微变通即可!

上一篇 下一篇

猜你喜欢

热点阅读