現(xiàn)在很多公司因為發(fā)展需要集成RN，但是要在現(xiàn)有的android項目上如何去集成呢？That's a Question,這篇文章主要就是討論下如何集成，大神繞步
要想集成RN，首先我們需要引入RN的庫
1525253415655.jpg
1525253681649.jpg
很慌有沒有，沒事仔細看看錯誤日志，它說我現(xiàn)在是用的是react-native 0.20.1的版本，what？現(xiàn)在RN版本都0.51+了，作為追求新版本的我們怎么能用這么low的版本，那么怎么解決呢？
首先，在你的安卓項目的根目錄下npm init，如下：
yhd@yihaodiandeMacBook-Pro RnApplication $ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (rnapplication) rntest
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/yhd/Desktop/RnApplication/package.json:
{
"name": "rntest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes) yes
1525254162270.jpg
修改package.json如下
{
"name": "rntest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"author": "",
"license": "ISC"
}
緊接著我們安裝react和react-native
yhd@yihaodiandeMacBook-Pro RnApplication $ npm install react@16.0.0
npm WARN rntest@1.0.0 No description
npm WARN rntest@1.0.0 No repository field.
+ react@16.0.0
added 18 packages from 73 contributors in 4.234s
┌────────────────────────────────────────────────────────┐
│ npm update check failed │
│ Try running with sudo or get access │
│ to the local update config store via │
│ sudo chown -R $USER:$(id -gn $USER) /Users/yhd/.config │
└────────────────────────────────────────────────────────┘
yhd@yihaodiandeMacBook-Pro RnApplication $ npm install react-native@0.51.1
npm WARN deprecated connect@2.30.2: connect 2.x series is deprecated
> fsevents@1.2.3 install /Users/yhd/Desktop/RnApplication/node_modules/fsevents
> node install
[fsevents] Success: "/Users/yhd/Desktop/RnApplication/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
npm WARN rntest@1.0.0 No description
npm WARN rntest@1.0.0 No repository field.
+ react-native@0.51.1
added 777 packages from 324 contributors in 58.036s
這里我們react安裝的是16.0.0，react-native安裝的是0.51.1
安裝完畢后我們發(fā)現(xiàn)android項目根目錄下多了一個node_modules文件夾
1525255161467.jpg
ok，編譯運行，依然報錯，心拔涼，看下日志
1525255292550.jpg
發(fā)現(xiàn)版本是改過來了，報錯原因是minSdkVersion太低，ok改成16，編譯通過，美滋滋
接下來就可以寫RN頁面了
寫一個Activity繼承自ReactActivity
public class MainActivity extends ReactActivity {
@Nullable
@Override
protected String getMainComponentName() {
return "YRNTest";
}
}
自定義一個Application
public class MyApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return true;
}
@Override
protected String getJSMainModuleName() {
return "index";
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}
getUseDeveloperSupport方法返回true表示debug模式
1525256303196.jpg
啟動RN服務(wù)，在android項目根目錄下運行如下npm start
yhd@yihaodiandeMacBook-Pro RnApplication $ npm start
> rntest@1.0.0 start /Users/yhd/Desktop/RnApplication
> node node_modules/react-native/local-cli/cli.js start
Scanning folders for symlinks in /Users/yhd/Desktop/RnApplication/node_modules (10ms)
┌────────────────────────────────────────────────────────────────────────────┐
│ Running Metro Bundler on port 8081. │
│ │
│ Keep Metro Bundler running while developing on any JS projects. Feel │
│ free to close this tab and run your own Metro Bundler instance if you │
│ prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
/Users/yhd/Desktop/RnApplication
Metro Bundler ready.
Loading dependency graph, done.
現(xiàn)在我們來重新運行項目，nice，崩潰了
我們看一下崩潰日志
FATAL EXCEPTION: Thread-1867
Process: com.zsh.yhd.rnapplication, PID: 22576
java.lang.UnsatisfiedLinkError: dlopen failed: "/data/data/com.zsh.yhd.rnapplication/lib-main/libgnustl_shared.so" is 32-bit instead of 64-bit
at java.lang.Runtime.load(Runtime.java:332)
at java.lang.System.load(System.java:1069)
at com.facebook.soloader.DirectorySoSource.loadLibraryFrom(DirectorySoSource.java:71)
at com.facebook.soloader.DirectorySoSource.loadLibrary(DirectorySoSource.java:42)
at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:299)
at com.facebook.soloader.DirectorySoSource.loadLibraryFrom(DirectorySoSource.java:65)
at com.facebook.soloader.DirectorySoSource.loadLibrary(DirectorySoSource.java:42)
at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:299)
at com.facebook.soloader.DirectorySoSource.loadLibraryFrom(DirectorySoSource.java:65)
at com.facebook.soloader.DirectorySoSource.loadLibrary(DirectorySoSource.java:42)
at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:299)
at com.facebook.soloader.DirectorySoSource.loadLibraryFrom(DirectorySoSource.java:65)
at com.facebook.soloader.DirectorySoSource.loadLibrary(DirectorySoSource.java:42)
at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:299)
at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:247)
at com.facebook.react.bridge.ReactBridge.staticInit(ReactBridge.java:20)
at com.facebook.react.bridge.NativeMap.<clinit>(NativeMap.java:21)
at com.facebook.react.bridge.JSCJavaScriptExecutorFactory.create(JSCJavaScriptExecutorFactory.java:23)
at com.facebook.react.ReactInstanceManager$4.run(ReactInstanceManager.java:928)
at java.lang.Thread.run(Thread.java:818)
導(dǎo)致這個問題的原因是：React Native項目在64位Android手機上運行
解決方法就是取消掉所有的64位的.so文件，全部加載32位的就可以了，下面是步驟
1.在項目的根目錄的 gradle.properties 里面添加一行代碼 android.useDeprecatedNdk=true
1525316453690.jpg
再次編譯運行，成功顯示出js頁面 最后，別忘記在AndroidManifest.xml里面添加權(quán)限，附上圖片
1525316641484.jpg
1525317265146.jpg
