本来这一篇准备学习ReactNative的常用组件的比如button，listview这些，可是突然发现学习到现在所有的项目都是纯ReactNative项目，还不知道怎样融合到已有的原生项目中，而现在绝大部分的ReactNative应用均是采用融合到已有项目中的方式，把项目中的某一个模块使用ReactNative来开发，所以有必要弄清楚ReactNative是如何融合到已有项目的。查看了一下官方文档，官方已经告诉了我们融合的详细步骤，想着按照官网步骤一步一步来应该问题不大，结果还是天真了，真的是一步一个坑啊，官网你这个大骗子！周末就这样没了。所以这篇会详细记录一下融合过程中的各种坑，也给看到的小伙伴提个醒吧。开始之前确保你的PC中已经正确安装了node.js以及Python 2 ，如果还没有安装好，看这篇文章React Native之路（一）Windows下安装配置，下面将结合官网的步骤开始踩坑之路：
1 新建一个Android项目
注意Minimum SDk选择API16以上
一路next后finish。
2添加JS
打开studio的Terminal窗口，输入如下命令：
npm init
会让你输入一些初始化package.json 的配置信息，例如
按照提示输入就行了。
这一步完成之后，在项目的根目录下就会生成package.json这个文件，打开之后长这个样子：
下一步输入：
npm install --save react react-native
用来安装React 和React Native。
大约一两分钟的样子（如果卡到这里了，看看安装时是不是忘了配置镜像），完成之后你的根目录下会多了一个node_modules的文件夹，里面存放了下载好的React 和React Native。
下一步继续输入如下命令
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
如果PC中还没有安装curl命令在这里下载，下载后记得配置好环境变量哦（也就是把bin目录下的curl命令加入到系统环境变量里），然后最重要的是重启一下studio，要不然还是无法使用curl命令。
重启studio后输入curl会出现
说明已经安装成功了。
继续上面的步骤输入：
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
用于下载.flowconfig文件。显示如下说明下载成功
接下来把如下命令粘贴到package.json 文件下 scripts标签中
"start": "node node_modules/react-native/local-cli/cli.js start"
粘贴后的package.json文件内容如下：
下一步，在根目录下创建index.android.js文件并把如下代码粘贴到其中：
'use strict';
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class HelloWorld extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.hello}>Hello, World</Text>
</View>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
代码很简单，居中显示一个HelloWorld。
3 项目配置
修改app的build.gradle文件添加如下内容,并修改appcompat-v7版本为23.0.1（只能基于此版本构建）
android{
....
ndk {
abiFilters "armeabi-v7a", "x86"
}
}
packagingOptions {
exclude "lib/arm64-v8a"
}
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}
dependencies {
...
compile "com.facebook.react:react-native:+" // From node_modules.
compile 'com.android.support:appcompat-v7:23.0.1'
}
修改后的build.gradle完整内容如下：
apply plugin: 'com.android.application'
android {
compileSdkVersion 25
buildToolsVersion "25.0.2"
defaultConfig {
applicationId "com.reactnative.example"
minSdkVersion 16
targetSdkVersion 25
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
ndk {
abiFilters "armeabi-v7a", "x86"
}
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}
packagingOptions {
exclude "lib/arm64-v8a"
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.facebook.react:react-native:+'
testCompile 'junit:junit:4.12'
}
项目的build.gradle中添加依赖
allprojects {
repositories {
...
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
...
}
编译通过之后查看一下使用的react-native版本
居然是0.20.1，这和目前的最新版0.43.2差的太远了，最新版在这里查看,或者项目中node_modules/react-native/android/
解决方案是把在项目build.gradle中配置的
url "$rootDir/../node_modules/react-native/android"
改成
url "$rootDir/node_modules/react-native/android"
重新编译，发现已经变成了0.43.2了。
继续下一步，在AndroidManifest.xml中添加网络访问权限
<uses-permission android:name="android.permission.INTERNET" />
3 创建Activity
以下几步不要安装官网的去做，官网的步骤太麻烦，而且很久没有更新了。
1新建一个Activity，让其继承ReactActivity，并重写getMainComponentName(),返回我们在index.android.js
中注册的HelloWorld这个组件。
2自定义一个Application，继承ReactApplication ，编写以下代码：
public class App extends Application implements ReactApplication {
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
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}
记得在AndroidManifest.xml中引用
android:name=".App"
在MainActivity中通过按钮启动我们的ReactNativeActivity
findViewById(R.id.start_rn_btn).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(MainActivity.this, ReactNativeActivity.class));
}
});
下一步，app/src/main下新建assets文件夹。
运行如下命令
react-native start
如果卡在了这一步：
没关系，用资源管理器打开你工程的根目录，在此目录下重新运行一个命令行并在其中输入如下命令
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/
完成之后assets目录下会生成以下两个文件
确认一下react native service处于运行状态，然后正常运行你的APP，点击start，如果出现
恭喜你！你已经可以开始搞混合开发了。
下一篇开始各种组件学习，欢迎大家关注，共同进步！
网友评论