android stadio集成React-native

最新推荐文章于 2024-05-11 19:00:05 发布

原创最新推荐文章于 2024-05-11 19:00:05 发布 · 379 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍如何在Android项目中集成React Native，包括创建工程、安装依赖、配置环境等步骤，并提供了常见问题的解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步、创建android工程

第二步、切换到Android Studio左下角的Terminal窗口，执行npm init命令

注意一：init命令记住name参数

init命令，需要填写诸如name、version等参数，输入后按回车接着输入下一个参数。init之后会生出package.json文件。name最为重要，工程名，在后面的index.android.js（这个名称与参数中要一致）和MyReactActivity里都要用到。其它的都可以一路回车使用默认值。

第三步、分别执行

$npm install

$npm install --save react（安装过程失败会提示对应的版本号与react-native不符合。。对应提示的版本去安装）

如果RN项目中有用到第三方库记得安装对应模块

第四步、创建.flowconfig文件

.flowconfig文件可以从facebook的github 上复制，然后在工程的根目录创建.flowconfig文件，将其内容复制进去即可。

第五步、打开package.json文件，然后将“start": "node node_modules/react-native/local-cli/cli.js start"添加到scripts节点下

第六步、把rn项目的index.android.js拷贝进来放在根目录，与rn相关的组件一并拷贝

第七步在App的build.gradle文件下添加facebook react 依赖包

compile 'com.facebook.react:react-native:+' （之前指定具体版本发现ReactApplication找不到）没指定版本以后可以
compile 'com.android.support:appcompat-v7:23.1.+' （版本没对应上也会报错）

compileSdkVersion 23
minSdkVersion 16 reactNative最小支持到16
targetSdkVersion 23

第八步、在project的build.gradle文件下添加如下

repositories {
    jcenter()
    maven {
        // All of React Native (JS, Android binaries) is installed from npm
        url "$rootDir/node_modules/react-native/android"
    }
}

第九步、添加权限

<uses-permission android:name="android.permission.INTERNET"></uses-permission>

第十步、添加NDK的支持

在app的build.gradle文件下的android节点下的

defaultConfig

 增加ndk支持

defaultConfig {
    applicationId "com.example.summer.myapplication"
    minSdkVersion 16
    targetSdkVersion 23
    versionCode 1
    versionName "1.0"
    ndk {
        abiFilters "armeabi-v7a","x86"
    }
}

并且在android节点下增加

configurations.all{
    resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}

然后在gradle.properties文件中增加

android.useDeprecatedNdk=true

第十一步、

编写一个activity继承ReactActivity 然后重写里面的方法。

public class MyReactActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "test";
    }


}

注意点：返回的这个值要跟你npm init里面的那个name属性一样，然后在清单文件中配置这个activity

第十二步、编写Application

public class MyApplication 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;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this,false);
    }
}

然后在清单文件中配置

第十三步

在Terminal中敲入react-native start或者npm start 会卡在Loading dependency graph, done.

解决方案：在app/src/main下创建assets目录，然后再运行react-native start 等到出现Loading dependency graph, done.关闭再运行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/

（相当于分成2步进行）

参考文章：

Android原生项目集成React Native

RN集成原生Android开发