React-native桥接Android原生开发详解

在开发RN的漫漫长河中,早晚有那么一天要接触到安卓的原生开发,笔者来介绍一下其中的酸甜苦辣.对于一个不懂android的小白来说,刚开始有点难,不过都是万事开头难.语言是想通的,原理也是大径若一.

开发过程中是要集成高德的导航功能,没有找到好的轮子的,只要写原生代码,然后在用JS去调用原生的导航模块.

首先注册模块

其意义在与将类注册到RN中,才能用JS去调用

public class AnExampleReactPackage implements ReactPackage {
  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }
  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();

    modules.add(new NaviActivity(reactContext));
    return modules;
  }
}

其中modules.add(new NaviActivity(reactContext));意义就是添加一个安卓原生的activity模块

这个模块可以定义方案,RN可以直接调用(方法上必须声明了@ReactMethod才可以)

@ReactMethod
  public void showFengMap(String mapID){
    Activity currentActivity = getCurrentActivity();
    Intent intent = new Intent(currentActivity, 页面名.class);
    currentActivity.startActivity(intent);
  }

笔者其中的到吗是跳转到其他页面,这里也可以做一些其他的操作.例如直接去分享

声明

在安卓程序的app内的MainApplication内,

@Override
  protected List<ReactPackage> getPackages() {
   return Arrays.<ReactPackage>asList(
     new MainReactPackage(),
      new AnExampleReactPackage()
   );
  }

加入刚刚注册过的包名

JS调用原生代码

import { NativeModules } from 'react-native';

export default NativeModules.NaviActivity;

笔者这里写了一个untils/CommonAndroidUntils.js,在需要用的页面直接引入这个js文件

CommonAndroidUntils.show();

实现跳转.

集成高德导航

对于一个小白直接去在android studio内集成高德地图刚开始还是有点难度的.不过理解之后感觉还好.简单些一下遇到的问题,提醒自己,帮助他人

直接拖入的.jar语音包不能引入

解决办法是右键.jar包,有将.jar引入的选项点击,等待同步即可.

其余的都是些小问题,根据demo以及文档轻松解决的不值一提了.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • React Native实现简单的登录功能(推荐)
  • ReactNative页面跳转实例代码
  • ReactNative之键盘Keyboard的弹出与消失示例
  • react-native 封装选择弹出框示例(试用ios&android)
  • Android原生嵌入React Native详解
  • ReactNative-JS 调用原生方法实例代码
  • ReactNative (API)AsyncStorage存储详解及实例
  • Windows下React Native的Android环境部署及布局示例
  • React-Native中使用验证码倒计时的按钮实例代码
赞 (0)

相关推荐

  • Android原生嵌入React Native详解

    Android原生嵌入React Native详解

    1.首先集成的项目目录 我使用的是直接按照react-native init Project 的格式来导入的,也就是说,我的Android项目目录是跟node_modules是在一个目录下的. 我们init完项目之后,项目初始化完成了,这时候我们可以用命令react-native run-android直接运行项目,至于怎么调试,之前已经说过. 说一下我们怎么开发和运行分开吧,我们开发一般会选择webstrom,开发后我们会Android和ios的编译分开. 启动npm 下面说一下android

  • ReactNative之键盘Keyboard的弹出与消失示例

    在开发中经常遇到需要输入的地方,所以就学习了一下ReactNative键盘Keyboard的弹出与消失的方法,留个笔记. 今天我们来说下RN对键盘事件的支持. 在React-native 的Component组件中有个Keyboard. github地址如下:https://github.com/facebook/react-native/tree/770091f3c13f7c1bd77c50f979d89a774001fbf0/Libraries/Components/Keyboard 我们先

  • ReactNative页面跳转实例代码

    ReactNative页面跳转实例代码

    效果图如下所示: 进入工作目录,运行 react-native init NavigatorProject 创建项目NavigatorProject import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableHighlight, Image, Navigator } from 'react-native'; class navigatorProject exte

  • React Native实现简单的登录功能(推荐)

    React Native实现简单的登录功能(推荐)

    React Native 简介: React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等. React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验.React Native 把重点放在所有开发人员关心的平台的开发效率上

  • React-Native中使用验证码倒计时的按钮实例代码

    React-Native中使用验证码倒计时的按钮实例代码

    开发过程中有获取手机验证码的场景,这时候有这样的要求: 1,点击"获取验证码"的按钮,发起获取验证码的网络请求,同时按钮置为不可用 2,如果网络请求成功,按钮继续不可用,但按钮上文本改为倒计时((*s)后重新获取) 3,如果网络请求失败,按钮置为可用 4,倒计时结束,按钮可用 直接上代码 源码 import React,{PropTypes} from 'react'; import {View,Text,TouchableOpacity} from 'react-native'; e

  • react-native 封装选择弹出框示例(试用ios&android)

    react-native 封装选择弹出框示例(试用ios&android)

    在开发 App 的时候,经常会使用到对话框(又叫消息框.提示框.告警框). 在web开发中经常会用得到.今天就来介绍了一下react-native 封装弹出框 之前看到react-native-image-picker中自带了一个选择器,可以选择拍照还是图库,但我们的项目中有多处用到这个选择弹出框,所以就自己写了一下,最最重要的是ios和Android通用.先上动态效果图~ 一.封装要点 1.使用动画实现弹框布局及显示隐藏效果 2.通过一个boolean值控制组件的显示隐藏 3.弹框选项数组通过

  • Windows下React Native的Android环境部署及布局示例

    Windows下React Native的Android环境部署及布局示例

    搭建基础环境 JDK(必须,不解释) SDK(建议使用Android Studio,集成SDK以及模拟器) genymotion(如果是使用真机或者Android Studio自带的模拟器,可以选择不装) NVM(node版本控制器,需要node4.0以上版本) 以上配置不是必须,可自行选择适合自己的环境,部分安装过程可能会涉及到翻墙,需要配置代理 配置踩坑记录 genymotion 这里选择genymotion模拟器来讲解,也会提一下Android Studio自带的模拟器的一些注意点,使用真

  • ReactNative-JS 调用原生方法实例代码

    ReactNative-JS 调用原生方法实例代码

    第一步首先创建ReactNative 模块类继承ReactContextBaseJavaModule package com.mixture; import android.content.Context; import android.widget.Toast; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule

  • ReactNative (API)AsyncStorage存储详解及实例

    ReactNative (API)AsyncStorage存储详解及实例

    AsyncStorage存储类似Android中的sharedpreference存储或者IOS中的NSDefaultUser不过ReactNative中的AsyncStorage只能存储字符串类型 常用方法: getItem(key:string,callback?:?(error:?Error,result:?string)=>void) 静态方法,该通过key字段来进行查询存储的数据,把该结果值作为参数传入第二个callback方法.如果发生错误,会把Error对象传入callback方法

  • React-native桥接Android原生开发详解

    React-native桥接Android原生开发详解

    在开发RN的漫漫长河中,早晚有那么一天要接触到安卓的原生开发,笔者来介绍一下其中的酸甜苦辣.对于一个不懂android的小白来说,刚开始有点难,不过都是万事开头难.语言是想通的,原理也是大径若一. 开发过程中是要集成高德的导航功能,没有找到好的轮子的,只要写原生代码,然后在用JS去调用原生的导航模块. 首先注册模块 其意义在与将类注册到RN中,才能用JS去调用 public class AnExampleReactPackage implements ReactPackage { @Overri

  • React-Native 桥接iOS原生开发详解

    React-Native 桥接iOS原生开发详解

    react-native的文档的原生模块中可以看到清洗的代码 传送门 接下来先说一下笔者的要实现的功能: 在iOS原生代码中集成高德导航,在RN中用JS去调用原声代码,并进行跳转, 接下来是笔者遇到的问题与不好理解的地方,写出来跟大家分享让大家少走弯路. 刚开始也是一头雾水且查资料也是到处都是但是都没有解决问题. iOS原生写法 在iOS中创建类继承NSObject(OC语言). //类的.h文件 #import <Foundation/Foundation.h> #import <Re

  • React Native系列之Recyclerlistview使用详解

    React Native系列之Recyclerlistview使用详解

    目录 recyclerlistview的介绍与使用 1.安装 2.概述和功能 3. RecyclerListView的使用 1.dataProvider 2.LayoutProvider 3.rowRenderer 4.onEndReached 5.onEndReachedThreshold 6.extendedState 7.scrollViewProps RecyclerListView所有属性 recyclerlistview的介绍与使用 1.安装 npm install --save r

  • React Native与Android 原生通信的方法

    我们用React Native 做混合开发的时候免不了要原生和React Native 进行通信交互,这篇文章就是分享原生模块与JS传递数据的几种方式. 总的步骤可以分为如下几点: 在原生端定义Module类,继承ReactContextBaseJavaModule,在Module类里,定义交互的方法. 定义Package类,继承ReactPackage,将Module实例添加到集合. 在android继承的ReactApplication,回调实现getPackages方法,将Package实

  • React Native 脚手架的基本使用详解

    React Native 脚手架的基本使用详解

    构建项目 在相应的路径下执行命令行:react-native init 项目名 (名称不可使用连接符等特殊字符,命名可以参考APP应用名称 比如 FaceBook) react-native --v //查看版本 react-native init demo --version 0.48.0//安装指定的版本 react-native init demo --verbose --version 0.48.0 //verbose是初始化的时候显示安装详情的,安装什么模块以及进度 npm view

  • Kotlin开发Android应用实例详解

    Kotlin开发Android应用实例详解

    Kotlin开发Android应用实例详解 相关文章:关于Kotlin语言的基础介绍: http://www.jb51.net/article/114086.htm 我们简单的知道了Kotlin这门新语言的优势,也接触了一些常见的语法及其简单的使用,相信你会对它有浓厚的兴趣,暂且理解为对它感兴趣吧,哈哈哈.那么,我们该如何在Android中应用这门新的语言呢?今天的这篇文章带你学习使用Kotlin开发Android应用,并对比我们传统语言Java,让你真真切切的感受到他的美和优雅. 配置 项目g

  • Taro打包Android apk过程详解

    首先,我们使用使用命令创建模板项目,创建的命令如下. taro init myApp 然后,使用 yarn 或者 npm install安装依赖包,并使用下面的命令编译Taro项目. yarn dev:rn 启动后会开启一个监听的进程. 不过,细心的你可能会发现,使用taro init命令初始化的项目是没有原生模块支持的,原来Taro使用了一个壳子工程,首先使用下面的命令下载壳子工程taro-native-shell,如下所示. git clone git@github.com:NervJS/t

  • React Context源码实现原理详解

    React Context源码实现原理详解

    目录 什么是 Context Context 使用示例 createContext Context 的设计非常特别 useContext useContext 相关源码 debugger 查看调用栈 什么是 Context 目前来看 Context 是一个非常强大但是很多时候不会直接使用的 api.大多数项目不会直接使用 createContext 然后向下面传递数据,而是采用第三方库(react-redux). 想想项目中是不是经常会用到 @connect(...)(Comp) 以及 <Pro

  • react后台系统最佳实践示例详解

    目录 一.中后台系统的技术栈选型 1. 要做什么 2. 要求 3. 技术栈怎么选 二.hooks时代状态管理库的选型 context redux recoil zustand MobX 三.hooks的使用问题与解决方案 总结 一.中后台系统的技术栈选型 本文主要讲三块内容:中后台系统的技术栈选型.hooks时代状态管理库的选型以及hooks的使用问题与解决方案. 1. 要做什么 我们的目标是搭建一个适用于公司内部中后台系统的前端项目最佳实践. 2. 要求 由于业务需求比较多,一名开发人员需要负

  • Android AOP 注解详解及简单使用实例（三）

    Android AOP 注解详解及简单使用实例（三）

    Android  注解 相关文章: Android AOP注解Annotation详解(一) Android AOP之注解处理解释器详解(二) Android AOP 注解详解及简单使用实例(三) 一.简介 在Android 里面 注解主要用来干这么几件事: 和编译器一起给你一些提示警告信息. 配合一些ide 可以更加方便快捷 安全有效的编写Java代码.谷歌出的support-annotations这个库 就是主要干这个的. 和反射一起 提供一些类似于spring 可配置的功能,方便简洁. 二

随机推荐