1、官方原生Android集成react native,根据官方文档配置后的总结与填坑(新版的配置手法上还是有些不同)。
2、官方jpush-react-native github文档写的配置过程在新版的react native中并不完整,使用最新的react native 0.41.2在配置极光时是需要做一些额外的操作(可以去看官方给的example)。
3、这篇文章中全程都是手动配置,是为了更好的理解整个配置流程。
4、我是边配边写的,最终配置成功,所以配置过程应该是一步都没漏。
5、把自己在配置过程中遇到的错误记录了下来(有些错误没记录下来的可以在评论给出),并给出解决方案。
Mac Sierra 10.12.1
Android Studio 2.2.3
Android Device(SDk:4.12.0)
Mac下Android的React Native开发环境配置
在极光推送注册App
react-native:^0.41.2
react: ^15.4.2
jpush-react-native: ^1.5.0
jcore-react-native: ^1.0.0
我只在Mac下Android的React Native开发环境配置接触过Android相关的开发知识,小白一个。
React Native的基本开发知识。
1、点击File->New->Project或者开始界面的New Project来新建一个项目:
2、添加react native资源:
打开终端进入项目根目录运行:
npm init
该命令会在根目录下创建一个package.json文件,在创建过程中因为我的项目名有大写,所以在终端必须要填写小写的name:
此时在项目根目录下就能看到package.json文件了:
在package.json文件中的scripts下添加:
"start": "node node_modules/react-native/local-cli/cli.js start"
继续在终端输入以下命令:
npm install --save react react-native
加载完后会看到node-model包也在根目录下了:
3、添加原生项目对react native的依赖:
按下图1,2,3的顺序依次修改配置:
在1中,为 React Native 添加一个 maven 依赖的入口,必须写在 "allprojects" 代码块中:
allprojects {
repositories {
...
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
}
}
...
}
此时它长这样:
注意:
url "$rootDir/node_modules/react-native/android"
一定不能导错路径,当前我们的路径是$rootDir/node_modules
而不是$rootDir/../node_modules
。
在2中,添加 React Native 依赖:
dependencies {
...
compile "com.facebook.react:react-native:+" // From node_modules.
}
此时它长这样:
在3中,声明网络权限:
添加访问的DevSettingsActivity 界面:
此时,它长这样:
现在,我们高高兴兴的sync吧!
如果遇到以下错误:
Error:Execution failed for task ':app:processDebugManifest'.
> Manifest merger failed : uses-sdk:minSdkVersion 15 cannot be smaller than version 16 declared in library [com.facebook.react:react-native:0.41.2] /Users/hfmoney/Documents/RN/Demo/RNJpushAndroidPro/app/build/intermediates/exploded-aar/com.facebook.react/react-native/0.41.2/AndroidManifest.xml
Suggestion: use tools:overrideLibrary="com.facebook.react" to force usage
将2中的minSdkVersion改为16即可,改完后再次sync。
如果遇到以下错误:
Warning:Conflict with dependency 'com.google.code.findbugs:jsr305'. Resolved versions for app (3.0.0) and test app (2.0.1) differ. See http://g.co/androidstudio/app-test-app-conflict for details.
在2中添加:
android {
...
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.0'
}
}
改完后再次sync。
4:使用Android原生调用React Native
1、创建类MainApplication.java,继承Application,实现ReactApplication:
实现如下:
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage()
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, false);
}
}
请自行导包
2、修改MainActivity.java,继承自ReactActivity,实现如下:
public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "HelloWorld";
}
}
MainActivity返回了在RN中注册的组件名:HelloWorld
。
3、在项目根目录下创建index.android.js
,并写入:
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class HelloWorld extends React.Component {
render() {
return (
Hello, World
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
4、修改app/src/main/AndroidMainfest.xml文件:
改变启动入口:
...
添加RN飘红的权限:
此时它长这样:
5、骚年跑起来吧!
sync->运行
如若遇到以下错误:
java.lang.RuntimeException: com.facebook.react.devsupport.JSException: Could not get BatchedBridge, make sure your bundle is packaged correctly
直接崩了