ReactNative入门-Android原生项目转RN项目

思路：官文是采用在项目基础上生成React结构，但问题颇多并不靠谱。生成React-Native项目然后替换android包更方便快捷。当前转换基于0.48版本。

新建项目

react-native init xxx

替换项目

删除RN项目下android文件夹，将原生项目复制到RN项目路径下，并改名为android

配置settings.gradle

在最上方添加

rootProject.name = '项目名'

项目build.gradle中添加maven依赖

allprojects {    repositories {        jcenter()        mavenLocal()        maven {            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm            url "$rootDir/../node_modules/react-native/android"        }    }}

gradle版本设置(可选）

设置gradle版本为4.3保证编译效率

路径gradle\wrapper\gradle-wrapper.properties

distributionBase=GRADLE_USER_HOMEdistributionPath=wrapper/distszipStoreBase=GRADLE_USER_HOMEzipStorePath=wrapper/distsdistributionUrl=https\://services.gradle.org/distributions/gradle-4.3-all.zip

项目的build.gradle设置

设置gradle的tools版本为3.0.0与gradle版本相呼应

buildscript {    repositories {        jcenter()        google()    }    dependencies {        classpath 'com.android.tools.build:gradle:3.0.0'    }}

编译环境设置

项目module中设置编译版本

使用gradle4.3必须要将buildToolsVersion升级为26以上

compileSdkVersion 25buildToolsVersion "26.0.2"

app的build.gradle增加ndk限制

defaultConfig {    ...    ndk {    abiFilters "armeabi-v7a", "x86"    }}

app的build.gradle增加依赖

dependencies {    ...    compile "com.facebook.react:react-native:+"  // From node_modules    ...}

Application配置

需要注意的是0.48正式版新增了一个getJSMainModuleName方法来定位主模块入口

public class App extends Application implements ReactApplication{    private static App mApp;    public static App getInstance() {        return mApp;    }    @Override    public void onCreate() {        super.onCreate();        mApp = this;        //react-native        SoLoader.init(this, /* native exopackage */ false);    }    //初始化react-native    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {        @Override        public boolean getUseDeveloperSupport() {            return BuildConfig.DEBUG;        }        @Override        protected List getPackages() {            return Arrays.asList(                    new MainReactPackage(),            );        }        @Override        protected String getJSMainModuleName() {            return "index";        }    };    @Override    public ReactNativeHost getReactNativeHost() {        return mReactNativeHost;    }}

测试Activity设置

注意，一定要在根目录进行

public class MainActivity extends ReactActivity {    @Override    protected String getMainComponentName() {        return "Yuwen";    }}

Manifest.xml配置

运行

所有设置配置好后在根目录下执行指令react-native run-android就能运行了~