如何在Windows环境的Androidstudio里面集成React-native开发环境

Z时代
2024-01-10
分类：综合

react

我的是已经开发好久的Androidstudio平台，如果没有安装Androidstudio，请参考相应的教程安装Androidstudio。

我的在创建了一个安卓项目出现了以下的错误

这是因为我的

可以看出是26.0.2，所以在里修改

compile 'com.android.support:appcompat-v7:28.+'

为

compile 'com.android.support:appcompat-v7:26.+'就可以啦

二、开始集成React-native

1.在Androidstudio的Terminal命令行中输入npm init 这里可以设置一些项目的属性等细节

每一项可以手动输入，回车进入下一项。

2.在Androidstudio的Terminal命令行中输入npm install --save react react-native，如果出现

则说明已经集成了 [email protected] 和 [email protected]，两者的版本分别是16.5.2和0.57.2。

查看项目中有node_modules，说明react和react native 安装完成

3.在项目根目录添加.flowconfig

在Androidstudio的Terminal命令行中输入npm install --save react react-native，如果出现

则可以在项目中找到.flowconfig文件，如下图所示。

三、NewReactNative配置相关内容（NewReactNative是自己创建的项目名称）

添加"start": "node node_modules/react-native/local-cli/cli.js start" 到package.json 文件下 scripts标签修改前

修改后为

2. 添加index.android.js文件到项目中

这个要在自己的项目中创建一个名为index.android.js的file文件就行，系统会自动的识别为js文件。有的文章中说React-native0.48以前的版本根目录下还有index.android.js和index.ios.js两个js文件，而在0.48以后就只有一个App.js这个文件了。我的版本是0.57也是创建了index.android.js这个文件可以在安卓手机上成功的运行，我也创建了一个App.js的文件，但是没有试过iOS版本的手机，所以暂时创建了index.android.js这个文件。

文件里的内容如图所示。这里我们将会在手机上运行看到

Hello,比杀手锏World

这句话。也可以修改这句内容显示其他的话。

3.App build.gradle配置，在中添加

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

这里注意不要使用maven中的，因为我们使用的是我们本地node_modules中的。

4.整个工程build.gradle配置

在中添加

5.在配置文件中添加添加<uses-permission android:name="android.permission.INTERNET" />上网权限。

6.添加native code

将创建项目的的代码做下修改，修改成React-native开发环境的代码。修改前如下所示：

修改后如下所示

代码中的

<activity android:name=".MainActivity">

修改为

<activity android:name=".MyReactActivity">

7.创建。

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);
    }}

并在配置zh中添加相应的设置，主程序也要做相应的改变，在还没有运行的时候会显示错误，没关系，运行就可以了，后面会进行操作，别着急。

8.开始试着启动程序吧

在Terminal中运行 npm start，看到下图表示启动成功

其中也出现了

这个问题，但是我点击三角运行按钮的时候，出现了

Error:Execution failed for task ':app:generateDebugBuildConfig'.这种错误，我的解决办法是，之前程序中错误的显示也解决了。

问题：运行的时候出现了崩溃，错误提示为

java.lang.RuntimeException: Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager server.

或许手机上显示

解决办法：进入项目，在android/app/src/main下新建assets目录

在在Androidstudio的Terminal命令行中输入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/assets是刚才新建的路径，根据自己的情况更改。

对于有的文章中说React-native0.48以前的版本根目录下还有index.android.js和index.ios.js两个js文件，而在0.48以后就只有一个App.js这个文件了。我也试了新建一个App.js，但是上面运行的命令需要将index.android.js换成App.js就可以了，完整的为

react-native bundle --platform android --dev false --entry-file App.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/assets，这样就可显示App.js里面的内容了，应该是将Android和iOS两个类型的文件合为一个，可以在安卓和iOS两种设备上运行。

每次改变新的内容的时候都要从新运行一遍这个命令才能生效。

其中有篇博文https://blog.csdn.net/yy11534/article/details/79608533 对上面问题分析的挺深刻，但是我用他说最不可能的方法解决了，我的版本比他的还高，所以是对他的一个补充吧。

在下面的博文中提出了一些问题，照抄如下：