CC's blog

CC的技术博客 专注于 it 互联网的技术爱好者

如何在现有的Android 项目中集成 React Native

1.创建一个 android 工程

2.在工程的总的 build.gradle 中加入

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


3. 在app 的build.gradle 中加入


dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.+'
    compile "com.facebook.react:react-native:+"
}


configurations.all {
    resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.1'
}

4.重写Application

package com.example.bear.myapplication;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

import java.util.Arrays;
import java.util.List;

/**
 * Created by bear on 17/11/1.
 */
public class Application extends android.app.Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        /**
         * 是否支持开发模式,如果支持就返回true,此时需要打开悬浮窗权限。
         * 不支持的话就返回false
         * @return
         */
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage()
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

5. 在需要加载 React Native 的代码中 继承ReactActivity并重写 getMainComponentName 方法

package com.example.bear.myapplication;
import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {


    @Override
    protected String getMainComponentName() {
        return "testApp"; //这里是 React Native 中注册的 App 名称
    }
}

6. 别忘了编辑manifest,加入网络请求 和 调试界面的注册


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.bear.myapplication" >
    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:name=".Application"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme" >
        <activity android:name=".MainActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
    </application>

</manifest>
none

添加新评论