react-native-navigation Android配

作者: NextStack | 来源:发表于2017-09-27 18:15 被阅读118次

参考

项目地址
官方文档

前言

单纯的我自以为,两条命令就可以成功安装并吃上这道菜:

$ npm i -S react-native-navigation
$ react-native link

结果:失败!报错一大堆!

配置

这下,我们只能手动配置了

首先,当然是安装最新版本的react-native-navigation

$ npm i -S react-native-navigation@latest

然后,我们编辑项目下的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

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

提示:主要更改android编译版本号,以及在dependencies中添加compile project(':react-native-navigation')

这些配置修改好了,我们接下来就主要修改两个java程序咯

源码

首先是MainActivity.java文件:

  1. 注释掉原先的MainActivity
  2. 导入包:import com.reactnativenavigation.controllers.SplashActivity;
  3. 重写MainActivity类:
    (看起来大概这样:)
package com.project;

import com.facebook.react.ReactActivity;
import com.reactnativenavigation.controllers.SplashActivity;
public class MainActivity extends SplashActivity {}

接着是重头戏:MainApplication.java
这里也是,直接注释掉原先的MainApplication方法,然后添加官方提供的代码:


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(
            new RCTCameraPackage(),
            new VectorIconsPackage()
        );
    }

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

注意看getPackages方法,把之前的类的数据写进去,除了MainReactPackage

相关文章

网友评论

    本文标题:react-native-navigation Android配

    本文链接:https://www.haomeiwen.com/subject/deauextx.html