android原有项目中集成react-native

来源：互联网发布：java 重定向 redirect 编辑：程序博客网时间：2024/05/21 10:52

react-native集成小结（各种坑）

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界面，就可以看到效果了

tip: 在模拟器上模拟摇晃手机没有显示设置菜单，，，但是在真机上就可以了

参考地址 http://www.jianshu.com/p/22aa14664cf9?open_source=weibo_search

阅读全文

1 0