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_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=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 25
buildToolsVersion "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<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>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配置

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.tfedu.yuwen">
    
    <!--必要权限-->
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WRITE_SETTINGS" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

    <!--不要忘记设置name-->
    <application
        android:name=".App"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        
        <!-- React测试页面 -->
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <!-- React设置页面 -->
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
        
    </application>

</manifest>

运行

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

最后编辑于：2018.01.12 10:17:30