一步一步在 Windows下搭建 React Native Android 开发环境

最新推荐文章于 2022-05-21 16:27:56 发布

快乐的kuai小马

最新推荐文章于 2022-05-21 16:27:56 发布

阅读量981

点赞数

分类专栏： Android 进阶文章标签： android React npm js npm命令

本文链接：https://blog.csdn.net/happy_horse/article/details/71157009

版权

本文详细介绍了如何在Windows操作系统下逐步搭建React Native Android开发环境，包括创建Android项目、引入React-Native、解决编译版本问题、配置运行调试以及应对各种编译运行中遇到的问题。通过跟随教程，开发者可以成功建立RN开发环境并进行真机测试。

摘要由CSDN通过智能技术生成

一、前言

搭建RN 的环境过程中可能会遇到比较多的坑，要有一个心理准备。我昨天搭建环境的时候，遇到很多的问题，一个问题一个问题的google，到昨天晚上遇到的最后一个问题，始终解决不了，今天又折腾了一天，才弄好。

二、什么是 React Native？

官方解释：

React Native使你能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP。

React Native着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台。(Learn once, write anywhere)

Facebook已经在多项产品中使用了React Native，并且将持续地投入建设React Native。

大白话：

就是，老板招聘一个会RN 的人，就可以抵得上分别招Android、IOS、前端各一个人，然后就没有然后呢。

作为一个技术人才，技术的知识广度和深度始终是不懈的追求。技术总是超前发展的，你不学习，你不进步，就会慢慢被社会淘汰。

三、开始搭建

1、新建一个 Android 项目

项目名称：RnTest

2、引入React-Native

在你的app目录下的build.gradle加入react-native依赖，我加入的是最新版本的：

compile "com.facebook.react:react-native:+"

然后在AndroidManifest.xml加入访问网络权限，当然一般已经项目都有这个权限，如果有这一步可以忽略：

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

为了让项目支持调试RN，需要在AndroidManifest.xml里面加入RN的DevSettingsActivity，如下：

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

这样真机晃动手机或者点击Menu菜单就会打开相关的调试页面，如图下所示：

这里写图片描述

这里部署完后，还有一个坑，就是React-Native对编译版本和最小编译版本都有要求，它需要app的build.gradle文件的compileSdkVersion为23，minSdkVersion为16，因为我们项目要求最低版本为15甚至更低，这里需要在app的AndroidManifest.xml加入：

<uses-sdk tools:overrideLibrary="com.facebook.react" />

3、实现方式1：引用 ReactRootView

新建一个RnActivity.java：

import com.facebook.react.common.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;

public class RnActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler{
   

    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_rn);

        mReactRootView = (ReactRootView)findViewById(R.id.react_rootview);

        findViewById(R.id.back_button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                RnActivity.this.finish();
            }
        });

        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED).build();

        mReactRootView.startReactApplication(mReactInstanceManager, "RnTest", null);
    }

    @Override
    public void invokeD