為了及時響應運營提出的需求,經(jīng)各方討論,決定把現(xiàn)有App的首頁,部分地方用ReactNative來實現(xiàn).前期的集成工作,已經(jīng)順利完成.
iOS端的App,采用cocoapod管理第三方庫的方式,實現(xiàn)方式比較簡單,網(wǎng)上正確教程很多.而Android集成中,需要注意的地方很多,而且網(wǎng)絡上大部分教程,省略了很多需要注意的細節(jié).剛剛開始Android學習的我,搜索不到詳細入微的合適教程,糾結了良久,記錄步驟如下.
首先,將npm創(chuàng)建項目的package.json文件和node_modules文件夾,拷貝到Android項目的根目錄下,省略使用npm命令創(chuàng)建文件和重新下載模塊的時間.文件層級如下圖:
修改最外層的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文件,修改用處說明如下圖:
具體代碼:
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.
在和MainActivity同一級下新建繼承至Application的類RNApplication,并實現(xiàn)接口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,并實現(xiàn)尋找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中使用創(chuàng)建的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已經(jīng)大功告成.
回到項目根目錄,用npm start命令啟動RN接口,然后運行Android項目,就能看到index.android.js文件中設置的界面了.
如果是Android真機調試,需要保證手機和電腦共用一個網(wǎng)絡,并將手機端口指向電腦的8081端口,設置參考React-Native開發(fā)（三）在Android真機上調試
iOS設備調試時,使用RN的Button控件點擊后,出現(xiàn)如下警告:
`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 (觸摸透明) 時報了一個警告
遇到問題,請留言交流~
關注和喜歡都是對我的支持和鼓勵~
