(五)react-native开发系列之Android原生交互
react-native可以做web与原生的交互,这是使用react-native开发项目的主要目的之一,也是主要优势,用rn而不用原生交互则毫无价值,这篇文章用来记录在项目中rn的原生交互使用过程。
之前说过要做的是一个pda项目,所以今天以input获取焦点的时候禁止软键盘弹出为例,大体说一下rn的原生交互过程。
android的原生交互分为以下几步
- 编写原生代码
- 向js暴露原生接口
- 注册原生模块
- 导出并再rn导入原生,模块
1、编写原生模块
作为web工程师出身的我,对原生android代码是不太了解的,充其量也只是稍微了解点java语言,但是通过自己的努力,还是过来了(笑哭);根据需求,就是再刚一进入页面的时候,让第一个input获取焦点,并同时隐藏软键盘,前端代码很好写,就是在获取焦点之后调用隐藏软键盘的原生功能;搞清楚了需求之后就开始编写原生代码了。
如上图,在newpda目录下面新建BoardModule类文件,用来编写原生功能代码;这个类继承自 ReactContextBaseJavaModule,代码如下
package com.newpda;
import android.util.Log;
import android.widget.Toast;
import android.widget.EditText;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.lang.reflect.Method; import java.util.HashMap;
import java.util.Map;
import android.content.Context;
import android.app.Activity;
import android.app.ActivityManager;
import android.view.inputmethod.InputMethodManager;
import com.facebook.infer.annotation.Assertions;
import javax.annotation.Nullable; /**
* Description: Created by song on 2018/7/3. email:gaosongai@foxmail.com
*/
public class BoardModule extends ReactContextBaseJavaModule {
private final ReactApplicationContext reactContext;
public BoardModule(ReactApplicationContext reactContext) {
super(reactContext);
this.reactContext = reactContext; // 获取上下文
} @Override
public String getName() {
return "BoardModule";
} /**
* 关闭Edittext软件盘,光标依然正常显示。
*/
@ReactMethod
public void hideboard() {
Activity currentActivity = getCurrentActivity();
InputMethodManager mInputMethodManager = (InputMethodManager)
Assertions.assertNotNull(this.reactContext.getSystemService(Context.INPUT_METHOD_SERVICE));
mInputMethodManager.hideSoftInputFromWindow(currentActivity.getCurrentFocus().getWindowToken(), 0);
}
}
hideboard为隐藏软键盘的方法,并向js暴露hideboard方法,要导出一个方法给JavaScript使用,Java方法需要使用注解@ReactMethod
2、注册模块
然后注册原生模块,同级目录下新建CustomBoardPackage类,代码如下
package com.newpda; import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager; import java.util.ArrayList;
import java.util.Collections;
import java.util.List; /**
* Description:
* Created by song on 2018/9/6.
* email:gaosongai@foxmail.com
*/
public class CustomBoardPackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules=new ArrayList<>();
modules.add(new BoardModule(reactContext));
return modules;
} @Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
我们需要在应用的Package类的createNativeModules方法中添加这个模块。如果模块没有被注册,它也无法在JavaScript中被访问到。
然后这个package需要在MainApplication.java文件的getPackages方法中提供,文件在同级目录下,代码如下
package com.newpda; 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(),
new CustomBoardPackage() // 刚刚添加的方法
);
} @Override
protected String getJSMainModuleName() {
return "index";
}
}; @Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
} @Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
3、在rn中引入模块
为了让你的功能从JavaScript端访问起来更为方便,通常我们都会把原生模块封装成一个JavaScript模块。这不是必须的,但省下了每次都从NativeModules中获取对应模块的步骤。这个JS文件也可以用于添加一些其他JavaScript端实现的功能,App.js同级目录下新建androidtoast.js,内容如下
import {NativeModules} from 'react-native';
module.exports = NativeModules.BoardModule;
然后在组件内部使用
import BoardModule from "../../../androidtoast";
BoardModule.hideboard(); // 使用原生模块方法
(五)react-native开发系列之Android原生交互的更多相关文章
- React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发
React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发 2016/09/23 | React Native技术文章 | Sky丶清| 4 条评论 | 1 ...
- React Native开发入门
目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料 一.前言 虽然只是简单的了解了一下Reac ...
- 【转】【React Native开发】
[React Native开发]React Native控件之ListView组件讲解以及最齐全实例(19) [React Native开发]React Native控件之Touchable*系列组 ...
- React Native开发 - 搭建React Native开发环境
移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift.那么对于开发一个App,至少需要两套代码.两个团队.对于公司来说,成本还是有的. ...
- React Native开发技术周报2
(1).资讯 1.React Native 0.22_rc版本发布 添加了热自动重载功能 (2).技术文章 1.用 React Native 设计的第一个 iOS 应用 我们想为用户设计一款移动端的应 ...
- React Native开发技术周报1
(一).资讯 1.React Native 0.21版本发布,最新版本功能特点,修复的Bug可以看一下已翻译 重要:如果升级 Android 项目到这个版本一定要读! 我们简化了 Android 应用 ...
- 深入浅出 React Native:使用 JavaScript 构建原生应用
深入浅出 React Native:使用 JavaScript 构建原生应用 链接:https://zhuanlan.zhihu.com/p/19996445 原文:Introducing React ...
- Hybrid App 和 React Native 开发那点事
简介:Hybrid App(混合模式移动应用)开发是指介于Web-app.Native-App这两者之间的一种开发模式,兼具「Native App 良好用户交互体验的优势」和「Web App 跨平台开 ...
- 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
随机推荐
- PHP系列 | Session 存储在Redis
默认是文件存储 修改php.ini的设置 session.save_handler = redis session.save_path = “tcp://127.0.0.1:6379″ 如果Redis ...
- 30段极简Python代码
Python 是机器学习最广泛采用的编程语言,它最重要的优势在于编程的易用性.如果读者对基本的 Python 语法已经有一些了解,那么这篇文章可能会给你一些启发.作者简单概览了 30 段代码,它们都是 ...
- netty-websocket-spring-boot-starter关闭报错 io/netty/channel/AbstractChannel$AbstractUnsafe io/netty/util/concurrent/GlobalEventExecutor
报错 java.lang.NoClassDefFoundError: io/netty/channel/AbstractChannel$AbstractUnsafe$ at io.netty.chan ...
- [ Docker ] 基础安装使用及架构
目录- Centos7 安装 Docker- Docker 架构 1. CentOS7 安装 Docker 目前 docker 有三个分支,moby.docker-ce.docker-ee moby ...
- [LeetCode] 211. Add and Search Word - Data structure design 添加和查找单词-数据结构设计
Design a data structure that supports the following two operations: void addWord(word) bool search(w ...
- [LeetCode] 655. Print Binary Tree 打印二叉树
Print a binary tree in an m*n 2D string array following these rules: The row number m should be equa ...
- .net MVC 项目中 上传或者处理进度获取方案
首先讲下思路 就是利用js轮询定时的给后台发送数据 话不多说看代码 --------- 以下是相关方法 var t function timedCount() { $.ajax({ type: 'ge ...
- WinForm SetWindowPos窗口置顶使用说明
就是有时候窗口不能够成功置顶,这时需要重新切换下标签,就可以置顶了,本文介绍C# SetWindowPos实现窗口置顶的方法: [DllImport("user32.dll", C ...
- 【VS开发】WaitForSingleObject 和 WaitForMultipleObjects函数 (让线程挂起等待事件)
WaitForSingleObject 和 WaitForMultipleObjects:1.WaitForSingleObject 等待函数可使线程自愿进入等待状态,直到一个特定的内核对象变为已通 ...
- LeetCode 976. 三角形的最大周长(Largest Perimeter Triangle) 33
976. 三角形的最大周长 976. Largest Perimeter Triangle 题目描述 给定由一些正数(代表长度)组成的数组 A,返回由其中三个长度组成的.面积不为零的三角形的最大周长. ...