前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >RN集成到Android原生项目实践

RN集成到Android原生项目实践

作者头像
用户1269200
发布2018-12-06 11:11:26
2.7K0
发布2018-12-06 11:11:26
举报
文章被收录于专栏:刘望舒

作者:闲庭CC https://www.jianshu.com/p/f546ad231382

一、Android项目集成RN

1.新建普通Android项目 新建一个普通的Android项目即可,打开Android Studio -> File -> New -> New Project… 按步骤执行即可。

2.在项目根目录下引入React Native模块 在AS中的Terminal中输入npm init ,输入一些项目的描述属性(默认一路回车也行),为了生成·文件的项目描述,根据提示来填写就好了,生成的json文件内容大致如下:

代码语言:javascript
复制
{
      "name": "rnappdemo",
      "version": "1.0.0",
      "description": "test",
      "main": "index.js",
      "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "no"
      },
      "repository": {
        "type": "git",
        "url": "no"
      },
      "keywords": [
        "no"
      ],
      "author": "liu",
      "license": "ISC",
      "dependencies": {
        "react": "^16.5.2",
        "react-native": "^0.55.4"
      }
    }

3.引入rn的一些模块文件

代码语言:javascript
复制
npm install --save react react-native

会在根目录生成一个node_modules文件夹,存的是RN的一些模块文件,如果在这个过程中出现require react@某.某.某版本, but none was installed ,那么就使用命令 npm i -S react@某.某.某版本//此处为提示的版本号. 注意:如何安装React Native指定版本,命令如:npm install --save react-native@0.55.4 ,这里建议使用因为最新版本使用可能会出错,稍微比新版低个版本,我这里没用最新版,使用的是0.55.4。 如何查看当前rn版本信息:npm info React-native

4.引入.flowconfig文件

方法一:.flowconfig文件可以从facebook的github上复制,然后在工程的根目录创建.flowconfig文件,将其内容复制进去即可。 方法二:在Terminal中执行以下命令:

代码语言:javascript
复制
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

5.接下来打开package.json文件,在scripts模块下添加,如上步骤2显示。 "start": "node node_modules/react-native/local-cli/cli.js start"

6.在项目根目录下的build.gradle添加以下配置

代码语言:javascript
复制
allprojects {
      repositories {
          jcenter()
          maven {
              url "https://maven.google.com"
          }
          maven {
              // All of React Native (JS, Android binaries) is installed from npm
              url "$rootDir/node_modules/react-native/android"//此处目录请额外注意
          }
      }
  }

7.在app下的build.gradle -> dependencies 添加以下依赖:

代码语言:javascript
复制
compile "com.facebook.react:react-native:+" // From node_modules.

同时在android -> defaultConfig 中添加 ndk{ abiFilters "armeabi-v7a","x86"} 完整如下:

代码语言:javascript
复制
   defaultConfig {
            applicationId "com.liujc.rnappdemo"
            minSdkVersion 16
            targetSdkVersion 27
            versionCode 1
            versionName "1.0"
            testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
            ndk{
                abiFilters "armeabi-v7a","x86"
            }
        }

8.在 AndroidManifest.xml 清单文件中声明网络权限:

代码语言:javascript
复制
<uses-permission android:name="android.permission.INTERNET" />

如果需要访问 DevSettingsActivity 界面(即开发者菜单),则还需要在 AndroidManifest.xml 中声明:

代码语言:javascript
复制
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
二、编写RN代码运行到Android项目中

1.在根目录下创建index.android.js文件:

代码语言:javascript
复制
'use strict';
import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 Text,
 NativeModules,
 View,
 ToastAndroid,
 DeviceEventEmitter
} from 'react-native';
let title = 'React Native界面';

class reactNative extends Component {

/**加载完成*/
componentWillMount() {
  let result = NativeModules.MyNativeModule.Constant;
  console.log('原生端返回的常量值为:' + result);
}

/**
* 原生调用RN
*/
componentDidMount() {
   DeviceEventEmitter.addListener('nativeCallRn',(msg)=>{
        title = "React Native界面,收到数据:" + msg;
        ToastAndroid.show("发送成功", ToastAndroid.SHORT);
   })
}
render() {
return (
  <View style={styles.container}>
    <Text style={styles.welcome} >
        {title}
    </Text>

    <Text style={styles.instructions}>
      To get started, edit index.android.js
    </Text>

    <Text style={styles.instructions}>
      Double tap R on your keyboard to reload,{'\n'}
      Shake or press menu button for dev menu
    </Text>

    <Text style={styles.welcome}>
      我是RN界面!
    </Text>
  </View>
);
 }
}
const styles = StyleSheet.create({
 container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
 },
 welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
 },
 instructions: {
   textAlign: 'center',
color: '#333333',
marginBottom: 5,
 },
});   
AppRegistry.registerComponent('reactNative', () => reactNative);

2.在Terminal中执行启动命令 npm run start 或者 yarn start//默认启动端口为8081,后面会描述如何修改端口号. 启动完成后出现如下界面:

代码语言:javascript
复制
┌──────────────────────────────────────────────   ────────────────────────────────┐
│                                                                              │
│  Running Metro Bundler on port 8081.                                         │
│                                                                              │
│  Keep Metro running while developing on any JS projects. Feel free to   
│
│  close this tab and run your own Metro instance if you prefer.               │
│                                                                              │
│  https://github.com/facebook/react-native                                    │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

Looking for JS files in
E:\workspace\WsForRN\RNAppDemo\RNAppDemo

Metro Bundler ready.

Loading dependency graph, done.

然后在浏览器中输入http://localhost:8081/index.android.bundle 访问没有报错,则说明启动成功.

3.在Application里面添加如下代码:

代码语言:javascript
复制
public class AppApplication extends Application implements ReactApplication {
 private static AppApplication instance;
 @Override
 public void onCreate() {
     super.onCreate();
     instance = this;
     SoLoader.init(this, false);
 }

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

 /**
  * 获取Application实例
  */
 public static AppApplication getInstance() {
     return instance;
 }
 @Override
 public ReactNativeHost getReactNativeHost() {
     return mReactNativeHost;
 }
}

4.在对应Activity中添加如下代码:

代码语言:javascript
复制
public class MyRNActivity extends ReactActivity {
 @Override
 protected String getMainComponentName() {
     return "reactNative";//此处容器名要与index.android.js里面注册的控件名一致
 }
}

5.记得把Application和对应的Activity在AndroidManifest.xml中注册使用。运行APP即可加载RN界面。 备注:设备要和服务端在同一局域网下调试,即链接同一WiFi或者设备链接电脑的代理。

— — — END — — —

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-10-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 刘望舒 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、Android项目集成RN
  • 二、编写RN代码运行到Android项目中
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档