react-native集成小结(各种坑)
先要有个android项目
配置环境
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
android原有项目中集成react-native,为了保证后面文件下载顺利请设置镜像
**1.**主要根据提醒生成package.json文件,填写自己的信息,也可一路回车键,全都是默认之后在生成的文件里面修改,也可以直接copy已有的文件,就不用生成了
npm init
**2.**安装React和React Native 执行结束会根目录多一个node_modules文件夹
(1)不能在项目编译的同时执行命令,否则报错提示没有权限(保证项目中的app下的build文件不被占用)
(2)必须用管理员权限去运行cmd
npm install --save react react-native
**3.**在项目的根目录新建.flowconfig,然后把下面地址在浏览器打开内容copy过来就行了
https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
**4.**在app/src/main/下创建assets文件夹(路径不能错哦)执行如下命令生成bundle
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/
**5.**文件配置
1.在app的build.gradle中添加,下面是完整的build.gralde,有对应注释
apply plugin: 'com.android.application'
android {
compileSdkVersion 26
buildToolsVersion "26.0.1"
defaultConfig {
applicationId "study.moa.com.react2"
minSdkVersion 16// 1 此处必须>=16
targetSdkVersion 26
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
// 2 添加ndk支持
ndk { abiFilters "armeabi-v7a", "x86" }
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
// 3 防止报错
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}
// 4 排除库 (可选)
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:26.+'
compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha7'
testCompile 'junit:junit:4.12'
// 5 From node_modules.
compile "com.facebook.react:react-native:+"
}
2.配置根目录的build.gradle
// 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.0'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
jcenter()
// 此处必须修改,不然会下载老版本的react-native,导致编译失败
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
}
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}
3.配置网络权限 AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="study.moa.com.myreactdemo" >
<!--网络权限-->
<uses-permission android:name="android.permission.INTERNET" />
<application
android:name=".MainApplication"
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>
<!--debug activity-->
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
<activity android:name=".MyReactActivity"></activity>
</application>
</manifest>
4.创建一个activity实现DefaultHardwareBackBtnHandler接口
public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()//
.setApplication(getApplication())//
.setBundleAssetName("index.android.bundle")//
.setJSMainModuleName("index.android")//
.addPackage(new MainReactPackage())//
.setUseDeveloperSupport(true)// 此处设置调试模式
.setInitialLifecycleState(LifecycleState.RESUMED)//
.build();
// 这里的HelloWorld名字必须要和index.android.js中的
// AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
// 名字相同
mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause(this);
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
@Override
protected void onDestroy() {
super.onDestroy();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostDestroy();
}
}
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
}
}
5.创建Application实现ReactApplication
public class MainApplication extends Application implements ReactApplication {
public static Context appContext;
private static MainApplication instance;
@Override
public void onCreate() {
super.onCreate();
instance = this;
appContext = getApplicationContext();
SoLoader.init(this,false);
}
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;
}
}
6.最后需要添加package.json配置
{
"name": "myreactdemo",
"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",
"dependencies": {
"react": "^16.0.0",
"react-native": "^0.48.4"
}
}
至此项目集成完成,下面运行。
可以在android studio中直接运行android项目,然后跳转到MyReactActivity界面,就可以看到效果了
修改调试:
- 在运行完android项目
- 我们摇一摇手机,点击Dev Settings后,点击Debug server host & port for device,
设置IP和端口(本机地址)如:192.168.0.104:8081 - 修改完js文件
- 回到空白页面,再次摇一摇手机,选择Reload JS,程序就运行起来
tip: 在模拟器上模拟摇晃手机没有显示设置菜单,,, 但是在真机上就可以了
参考地址 http://www.jianshu.com/p/22aa14664cf9?open_source=weibo_search