|
|
|
|
移动端
创建专栏

React Native组件集成到Android原生项目

为了把 React Native 集成到 Android 原生项目中,踩了很多坑,因为作为web前端开发,本来就不熟悉安卓,参考了网上很多文章,但是都很旧了,而 React Native 已经升级到了 0.55 版本了,入口文件已经合成了一个 index.js,下面的内容也是基于这个版本实践的。

作者:佚名|2018-06-13 16:38

技术沙龙 | 6月30日与多位专家探讨技术高速发展下如何应对运维新挑战!


为了把 React Native 集成到 Android 原生项目中,踩了很多坑,因为作为web前端开发,本来就不熟悉安卓,参考了网上很多文章,但是都很旧了,而 React Native 已经升级到了 0.55 版本了,入口文件已经合成了一个 index.js,下面的内容也是基于这个版本实践的。

环境搭建

已经搭建好 React Native 环境的可以跳过,还没有的可以参考 React Native 中文网的 搭建教程,比较详细。

创建Android原生项目

安卓开发者自然很熟悉这个步骤,然而对于web前端开发者还是比较迷茫的。可以参考一下 使用Android Studio创建一个新的Android工程,创建一个 Empty Activity,接下来会比较好操作。

集成React Native

步骤一:安装相关依赖

在项目根目录下执行 npm init 命令,生成 package.json 文件,添加以下命令

  1. "scripts": { 
  2.     "start""node node_modules/react-native/local-cli/cli.js start" 

执行 npm i react react-native -S 安装 react 和 react-native

步骤二:配置maven

在你的 app/ 目录下的 build.gradle 文件中的 dependencies 里添加 React Native 依赖:

  1. dependencies { 
  2.     ... 
  3.     compile "com.facebook.react:react-native:+" 

在项目根目录下的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口,必须写在 “allprojects” 代码块中:

  1. allprojects { 
  2.     repositories { 
  3.         ... 
  4.         maven { 
  5.             url "$rootDir/node_modules/react-native/android" 
  6.         } 
  7.     } 

步骤三:代码集成,创建我们的 react-native 组件,在根目录下创建 index.js,(在 react-native 0.49.0版本以前,是 index.android.js 和 index.ios.js 作为入口文件,现在合成一个 index.js 文件了)

  1. import React, {Component} from 'react'
  2. import {AppRegistry,View,Text} from 'react-native'
  3. class App extends Component{ 
  4.     render(){ 
  5.         return ( 
  6.             <View
  7.                 <Text>哈哈哈</Text> 
  8.             </View
  9.         ) 
  10.     } 
  11. AppRegistry.registerComponent('ReactNativeView', () => App); 

然后创建 MyReactActivity,Activity 是安卓中基本的页面单元,简单的说,可以看做 web 开发中的一个 html 页面。

在上面创建安卓项目的时候,已经创建了一个 MainActivity,在它的同级目录下,在 Android Studio右键新建一个 Activity,命名为 MyReactActivity,然后把内容改为如下:

  1. package com.example.administrator.androidreactnative; 
  2. import javax.annotation.Nullable; 
  3. import com.facebook.react.ReactActivity; 
  4. public class MyReactActivity extends ReactActivity { 
  5.     @Nullable 
  6.     @Override 
  7.     protected String getMainComponentName() { 
  8.         return "ReactNativeView"
  9.     } 

接着创建 MainApplication

  1. package com.example.administrator.androidreactnative; 
  2. import android.app.Application; 
  3. import com.facebook.react.ReactApplication; 
  4. import com.facebook.react.ReactNativeHost; 
  5. import com.facebook.react.ReactPackage; 
  6. import com.facebook.react.shell.MainReactPackage; 
  7. import com.facebook.soloader.SoLoader; 
  8. import java.util.Arrays; 
  9. import java.util.List; 
  10. public class MainApplication extends Application implements ReactApplication { 
  11.     private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 
  12.         @Override 
  13.         public boolean getUseDeveloperSupport() { 
  14.             return BuildConfig.DEBUG; 
  15.         } 
  16.         @Override 
  17.         protected List<ReactPackage> getPackages() { 
  18.             return Arrays.<ReactPackage>asList( 
  19.                 new MainReactPackage() 
  20.             ); 
  21.         } 
  22.     }; 
  23.     @Override 
  24.     public ReactNativeHost getReactNativeHost() { 
  25.         return mReactNativeHost; 
  26.     } 
  27.     @Override 
  28.     public void onCreate() { 
  29.         super.onCreate(); 
  30.         SoLoader.init(this,false); 
  31.     } 

最后在 app/src/main/AndroidManifest.xml 文件中,添加一些权限,以及声明MainApplication 跟 MyReactActivity

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     package="com.example.administrator.androidreactnative"
  4.     <uses-permission android:name="android.permission.INTERNET"/>   <!-- 网络权限 --> 
  5.     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/> <!-- 弹框权限 --> 
  6.     <uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW"/> <!-- 窗体覆盖权限 --> 
  7.     <!-- 声明MainApplication --> 
  8.     <application 
  9.         android:name=".MainApplication" 
  10.         android:allowBackup="true" 
  11.         android:icon="@mipmap/ic_launcher" 
  12.         android:label="@string/app_name" 
  13.         android:roundIcon="@mipmap/ic_launcher_round" 
  14.         android:supportsRtl="true" 
  15.         android:theme="@style/AppTheme"
  16.         <activity android:name=".MainActivity"
  17.             <intent-filter> 
  18.                 <action android:name="android.intent.action.MAIN" /> 
  19.                 <category android:name="android.intent.category.LAUNCHER" /> 
  20.             </intent-filter> 
  21.         </activity> 
  22.         <!-- 声明MyReactActivity --> 
  23.         <activity 
  24.             android:name=".MyReactActivity" 
  25.             android:label="@string/app_name" 
  26.             android:theme="@style/AppTheme"
  27.         </activity> 
  28.         <!-- 声明可以通过晃动手机或者点击Menu菜单打开相关的调试页面 --> 
  29.         <activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/> 
  30.     </application> 
  31. </manifest> 

原生页面跳转到react-native页面

在 MainActivity 添加一个按钮跳转到 MyReactActivity,首先在 app/src/main/res/layout 下的 activity_main.xml 添加一个按钮元素

  1. <Button 
  2.     android:id="@+id/btn" 
  3.     android:layout_width="wrap_content" 
  4.     android:layout_height="wrap_content" 
  5.     android:text="点击跳转到RN界面"/> 

然后在 MainActivity 里添加点击跳转事件

  1. package com.example.administrator.androidreactnative; 
  2. import android.support.v7.app.AppCompatActivity; 
  3. import android.content.Intent; 
  4. import android.os.Bundle; 
  5. import android.view.View
  6. public class MainActivity extends AppCompatActivity { 
  7.     @Override 
  8.     protected void onCreate(Bundle savedInstanceState) { 
  9.         super.onCreate(savedInstanceState); 
  10.         setContentView(R.layout.activity_main); 
  11.         // 点击按钮跳转到 react-native 页面 
  12.         findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() { 
  13.             @Override 
  14.             public void onClick(View view) { 
  15.                 startActivity(new Intent(MainActivity.this,MyReactActivity.class)); 
  16.             } 
  17.         }); 
  18.     } 

然后在Android Studio 的模拟器中打开就可以看到以下页面:

同时执行 npm start 启动本地服务器,点击按钮,出现了红屏,也就是错误页面。

从错误信息 error: bundling failed: NotFoundError: Cannot find entry file index.android.js in any of the roots 我们可以看出找不到入口文件index.android.js,而我们的入口文件是 index.js,因此我们需要另外加一些配置让它知道我们的入口文件其实是 index.js

解决方法参考 react-native/issues/16517。在 app/ 目录下的 build.gradle 文件中最上面添加

  1. apply plugin: 'com.android.application' // 这时原来存在的 
  2. apply from"../node_modules/react-native/react.gradle" 
  3. project.ext.react = [ 
  4.     entryFile: "index.js" 

然后在 MainApplication 的 ReactNativeHost 类中添加:

  1. private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 
  2.     ... 
  3.     // 这是需要添加的 
  4.     @Override 
  5.     protected String getJSMainModuleName() { 
  6.         return "index"
  7.     } 

重新在模拟器中运行,就可以正常跳转到 react-native 的页面了。

【本文为51CTO专栏作者“林鑫”的原创稿件,转载请通过微信公众号联系作者获取授权】

戳这里,看该作者更多好文

【编辑推荐】

  1. 一大波 Android 刘海屏来袭,全网最全适配技巧!
  2. Vue实现内部组件轮播切换效果
  3. 组件测试:改建遗留系统的起点
  4. 外媒速递:Android平台最强隐私与安全保护应用一览
  5. 写给 Android 开发的小程序 UI 布局指南(一)
【责任编辑:武晓燕 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

热门职位+更多