Android项目集成ReactNativeMac版

http://www.jianshu.com/u/5e618c136b79

为了及时响应运营提出的需求,经各方讨论,决定把现有App的首页,部分地方用ReactNative来实现.前期的集成工作,已经顺利完成.
iOS端的App,采用cocoapod管理第三方库的方式,实现方式比较简单,网上正确教程很多.而Android集成中,需要注意的地方很多,而且网络上大部分教程,省略了很多需要注意的细节.刚刚开始Android学习的我,搜索不到详细入微的合适教程,纠结了良久,记录步骤如下.
首先,将npm创建项目的package.json文件和node_modules文件夹,拷贝到Android项目的根目录下,省略使用npm命令创建文件和重新下载模块的时间.文件层级如下图:

文件层级

修改最外层的build.gradle文件,添加ReactNative的支持文件.

// Top-level build file where you can add configuration options common to all sub-projects/modules.

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

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

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

注意gradle:2.3.2版本号,要和Android Studio的版本一致(使用版本为2.3.2).
修改App文件夹内的build.gradle文件,修改用处说明如下图:

build.gradle

具体代码:

apply plugin: 'com.android.application'
apply from: "../../node_modules/react-native/react.gradle"

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.3"
    defaultConfig {
        applicationId "com.example.zhudong.rntest"
        minSdkVersion 16
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    splits {
        abi {
            reset()
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86"
        }
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
}
}

dependencies {
    compile "com.facebook.react:react-native:+" // From node_modules.
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
}

其中applicationId需要结合实际项目修改.注意,需要保证minSdkVersion最小值为16.
同步工程,可以在工程的External Libraries中看到添加成功的支持库react-native.

react-native

在和MainActivity同一级下新建继承至Application的类RNApplication,并实现接口ReactApplication.(包名和工程保持一致)

package com.example.zhudong.rntest;

import android.app.Application;

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

import java.util.Arrays;
import java.util.List;
/**
 * Created by zhudong on 2017/6/6.
 */

public class RNApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return true;
        }

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

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

    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, false);
    }
}

修改MainActivity继承至ReactActivity,并实现寻找ReactNative模块的方法,return后的名字,需要和index.android.js文件中导出的模块名一致.

package com.example.zhudong.rntest;

import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "navigation";
    }
}

最后在AndroidMainfest.xml中使用创建的RNApplication,并添加相应的权限.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.zhudong.rntest">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <application
        android:name=".RNApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        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>

ok,到此就Android项目集成ReactNative已经大功告成.
回到项目根目录,用npm start命令启动RN接口,然后运行Android项目,就能看到index.android.js文件中设置的界面了.
如果是Android真机调试,需要保证手机和电脑共用一个网络,并将手机端口指向电脑的8081端口,设置参考React-Native开发（三）在Android真机上调试

iOS设备调试时,使用RN的Button控件点击后,出现如下警告:

`useNativeDriver` is not supported because the native animated module is missing. Falling back to JS-based animation. To resolve this, add `RCTAnimation` module to this app, or remove `useNativeDriver`.

解决方式:react-native 调用 TouchableOpacity (触摸透明) 时报了一个警告
遇到问题,请留言交流~