欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

AndroidStudio嵌入ReactNative混合开发环境搭建

程序员文章站 2022-07-14 21:33:18
...
Java SDK: 1.8.0_121
AndroidStudio: 2.3
Node: 8.9.1
Python: 2.7.12
react-native-cli: 2.0.1
react-native: 0.50.4

前提:已安装配置好Java SDK,搭建好Androidstudio开发环境,安装配置好Node、python

一、创建AndroidStudio项目

AndroidStudio嵌入ReactNative混合开发环境搭建


AndroidStudio嵌入ReactNative混合开发环境搭建


AndroidStudio嵌入ReactNative混合开发环境搭建

AndroidStudio嵌入ReactNative混合开发环境搭建

AndroidStudio嵌入ReactNative混合开发环境搭建

等待项目创建完成。

二、集成ReactNative

项目左边视图窗口选择Project,点击左下角的Terminal终端按钮:

AndroidStudio嵌入ReactNative混合开发环境搭建

在终端窗口中执行:npm init,生成package.json文件

AndroidStudio嵌入ReactNative混合开发环境搭建

package name: (rnappdemo) 输入项目名称,全部小写:rnappdemo

version: (1.0.0) 输入版本号,可以直接回车,也可以输入自己想要的初始版本号

description 输入项目描述,随便输入:first reactnativeapp

entry point: (index.js)输入reactnative的入口文件:index.android.js

test command: 输入:no

git repository: 输入:no

keywords: 输入:no

author: 输入作者信息

license: (ISC) 输入许可 默认ISC

以上所以完成之后,最后输入yes确认 Is this ok? (yes) yes

AndroidStudio嵌入ReactNative混合开发环境搭建

在终端窗口执行:npm install --save react react-native 安装React 和React NativeAndroidStudio嵌入ReactNative混合开发环境搭建

查看项目中多出了一个node_modules目录,说明react和react-native安装成功(react的版本为当前最新版16.1.1,react-native的版本为当前最新版0.50.4)

AndroidStudio嵌入ReactNative混合开发环境搭建

在项目根目录下新建一个名为.flowconfig的文件,将 https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 网页的内容复制到.flowconfig文件中

AndroidStudio嵌入ReactNative混合开发环境搭建

三、配置reactnative相关内容

添加"start": "nodenode_modules/react-native/local-cli/cli.js start" 到package.json 文件中的script标签
AndroidStudio嵌入ReactNative混合开发环境搭建

在项目根目录下添加index.android.js文件,文件格式设置为UTF-8(选中index.js文件,File->File Encoding->more,选中UTF-8)内容为:

'use strict';
 import React from 'react';
 import {
   AppRegistry,
   StyleSheet,
   Text,
   View
 } from 'react-native';
 class HelloWorld extends React.Component {
   render() {
     return (
       <View style={styles.container}>
         <Text style={styles.hello}>第一个混合RNAPP</Text>
       </View>
     )
   }
 }
 var styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
   },
   hello: {
     fontSize: 20,
     textAlign: 'center',
     margin: 10,
   },
 });
 AppRegistry.registerComponent('HelloWorld', () => HelloWorld);



四、项目app模块build.gradle配置

在android->defaultConfig最后添加NDK支持:

ndk {
    abiFilters "armeabi-v7a", "x86"
}

 

在android里面添加如下两个配置:

packagingOptions {
    exclude "lib/arm64-v8a/librealm-jni.so"
}
configurations.all {
    resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}

 

在dependencies里面添加reactnative依赖:

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

完成后点击右上角的Sync now同步
AndroidStudio嵌入ReactNative混合开发环境搭建

五、项目build.gradle配置

在allprojects->respositories中添加以下内容,加载最新的react-native库,然后点击右上角的Sync now同步
maven {
         // All of React Native (JS, Android binaries) is installed from npm
         url "$rootDir/node_modules/react-native/android"
     }
AndroidStudio嵌入ReactNative混合开发环境搭建
在gradle.properties文件最后添加:android.useDeprecatedNdk=true,然后点击右上角Syncnow同步
AndroidStudio嵌入ReactNative混合开发环境搭建

六、配置app模块AndroidManifest.xml文件

添加网络权限:

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

添加弹窗权限:

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

在application里添加reactnative弹窗内置页面activity,否则摇晃手机并打开开发者菜单后,点击Dev Setting,会直接Crash:

<activityandroid:name="com.facebook.react.devsupport.DevSettingsActivity"/>
AndroidStudio嵌入ReactNative混合开发环境搭建

七、手动生成bundle文件

在app/src/main下新建assets目录,在终端窗口Terminal中执行:

react-native bundle --platform android --dev false--entry-file index.js --bundle-output app/src/main/assets/index.android.bundle--assets-dest app/src/main/res/

说明:

--platform:平台

--dev:开发模式

--entry-file:条目文件

--bundle-output:bundle文件生成的目录

--assets-dest:资源文件生成的目录

执行完成后,会在assets目录下生成两个文件:index.android.bundle、index.android.bundle.meta

AndroidStudio嵌入ReactNative混合开发环境搭建

八、添加Native Code

新建MyReactActivity,内容:


import android.support.annotation.Nullable;
import com.facebook.react.ReactActivity;

public class MyReactActivity extends ReactActivity {
    @Nullable
    @Override
    protected String getMainComponentName() {
        return "HelloWorld";
    }
}

GetMainComponentName()方法返回的"HelloWorld"是在index.js中AppRegistry.registerComponent('HelloWorld',() => HelloWorld);注册的HelloWorld模块(第一个参数'HelloWorld')

自定义Application:MainApplication,内容:
import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;


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

}

修改AndroidManifest.xml起始activity:

在application中添加android:name=".MainApplication";

将MainActivity改为MyReactActivity
AndroidStudio嵌入ReactNative混合开发环境搭建

九、运行

以上所以配置完成后,再配置好模拟器或直接链接手机(我是真机调试,在终端Terminal窗口中执行:adb reverse tcp:8081 tcp:8081),在终端窗口下执行:npm start,启动react服务,然后绿色三角点击运行,手机端屏幕可能显示的是"Hello, World",而不是"第一个混合 RNAPP",可以摇一摇手机,在出现的弹窗点击"DevSettings->debugging",设置Debug server host &port for device为:127.0.0.1:8081,然后重新运行,摇一摇,点击Reload,此时显示的就是"第一个混合 RNAPP"了
AndroidStudio嵌入ReactNative混合开发环境搭建

修改index.android.js,将"第一个混合 RNAPP"修改为"第一个混合 RNAPP OK",摇一摇手机,点击Reload重新加载,看一看手机界面有没有跟着变化

AndroidStudio嵌入ReactNative混合开发环境搭建


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