React Native之学习篇一

最新推荐文章于 2022-08-26 15:02:55 发布
最新推荐文章于 2022-08-26 15:02:55 发布
阅读量127 收藏
点赞数
文章标签： javascript java 移动开发 ViewUI
原文链接：https://my.oschina.net/todaybamboo/blog/1608341
版权

      有时候一个应用程序需要访问一个平台API，React Native还没有相应的模块。 也许你想重用一些现有的Java代码，而不必在JavaScript中重新实现它，或者编写一些高性能，多线程的代码，例如图像处理，数据库或任何数量的高级扩展。

    我们设计了React Native，因此您可以编写真实的本地代码，并可以访问平台的全部功能。 这是一个更高级的功能，我们并不期望它成为通常开发过程的一部分，但它是必不可少的。 如果React Native不支持您需要的本地功能，您应该可以自己构建它。

   如果您打算对Java代码进行更改，我们建议启用Gradle Daemon来加速构建。

   Toast模块

    下面构建Toast示例。 假设我们希望能够从JavaScript创建Toast消息。

    我们首先创建一个本地模块。 本地模块是一个Java类，通常扩展ReactContextBaseJavaModule类并实现JavaScript所需的功能。 我们的目标是能写ToastExample.show（'Awesome'，ToastExample.SHORT）; 从JavaScript在屏幕上显示一个简短的Toast。

 

package com.facebook.react.modules.toast;

import android.widget.Toast;

import com.facebook.react.bridge.NativeModule;

import com.facebook.react.bridge.ReactApplicationContext;

import com.facebook.react.bridge.ReactContext;

import com.facebook.react.bridge.ReactContextBaseJavaModule;

import com.facebook.react.bridge.ReactMethod;

import java.util.Map;

import java.util.HashMap;

public class ToastModule extends ReactContextBaseJavaModule {

  private static final String DURATION_SHORT_KEY = "SHORT";

  private static final String DURATION_LONG_KEY = "LONG";

  public ToastModule(ReactApplicationContext reactContext) {

    super(reactContext);

  }

}

     ReactContextBaseJavaModule要求实现一个名为getName的方法。 此方法的目的是返回在JavaScript中代表此类的NativeModule的字符串名称。 所以在这里我们将调用这个ToastExample，以便我们可以通过JavaScript中的React.NativeModules.ToastExample来访问它。

@Override

public String getName() {

     return "ToastExample";

}

    一个名为getConstants的可选方法返回暴露给JavaScript的常量值。 它的实现不是必需的，但是对于需要从JavaScript同步到Java的关键预定义值非常有用。

  @Override

  public Map<String, Object> getConstants() {

    final Map<String, Object> constants = new HashMap<>();

    constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);

    constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);

    return constants;

  }

    要将方法公开到JavaScript，必须使用@ReactMethod对Java方法进行注释。 桥接方法的返回类型总是无效的。 React Native桥是异步的，因此将结果传递给JavaScript的唯一方法是使用回调或发送事件（请参见下文）。

  @ReactMethod

  public void show(String message, int duration) {

    Toast.makeText(getReactApplicationContext(), message, duration).show();

  }

参数类型

    以@ReactMethod注解的方法支持以下参数类型，并直接映射到它们的JavaScript等效项

Boolean -> Bool

Integer -> Number

Double -> Number

Float -> Number

String -> String

Callback -> function

ReadableMap -> Object

ReadableArray -> Array

    阅读更多关于 ReadableMap 和ReadableArray

    注册模块

    Java中的最后一步是注册模块; 这发生在您的应用程序包的createNativeModules中。 如果一个模块没有被注册，它将不能从JavaScript获得。

package com.facebook.react.modules.toast;

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;

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 ToastModule(reactContext));

    return modules;

  }

}

     该包需要在MainApplication.java文件的getPackages方法中提供。 该文件存在于react-native应用程序目录中的android文件夹下。 这个文件的路径是：android / app / src / main / java / com / your-app-name / MainApplication.java。

protected List<ReactPackage> getPackages() {

    return Arrays.<ReactPackage>asList(

            new MainReactPackage(),

            new AnExampleReactPackage()); // <-- Add this line with your package name.

}

为了更简单地从JavaScript访问您的新功能，通常会将本地模块包装到JavaScript模块中。 这不是必须的，但是可以节省您的库的用户每次都需要将其从NativeModules中提取出来。 这个JavaScript文件也成为您添加JavaScript端功能的好地方。

/**

 * This exposes the native ToastExample module as a JS module. This has a

 * function 'show' which takes the following parameters:

 *

 * 1. String message: A string with the text to toast

 * 2. int duration: The duration of the toast. May be ToastExample.SHORT or

 *    ToastExample.LONG

 */

import {NativeModules} from 'react-native';

module.exports = NativeModules.ToastExample;

现在，从您的其他JavaScript文件中，您可以调用像这样的方法：

import ToastExample from './ToastExample';

ToastExample.show('Awesome', ToastExample.SHORT);

Toasts之外

回调

本地模块也支持一种特殊的参数 - 回调。 在大多数情况下，它被用来将函数调用结果提供给JavaScript。

import com.facebook.react.bridge.Callback;

public class UIManagerModule extends ReactContextBaseJavaModule {

...

  @ReactMethod

  public void measureLayout(

      int tag,

      int ancestorTag,

      Callback errorCallback,

      Callback successCallback) {

    try {

      measureLayout(tag, ancestorTag, mMeasureBuffer);

      float relativeX = PixelUtil.toDIPFromPixel(mMeasureBuffer[0]);

      float relativeY = PixelUtil.toDIPFromPixel(mMeasureBuffer[1]);

      float width = PixelUtil.toDIPFromPixel(mMeasureBuffer[2]);

      float height = PixelUtil.toDIPFromPixel(mMeasureBuffer[3]);

      successCallback.invoke(relativeX, relativeY, width, height);

    } catch (IllegalViewOperationException e) {

      errorCallback.invoke(e.getMessage());

    }

  }

...

它的方法将被访问在JavaScript中使用：

UIManager.measureLayout(

  100,

  100,

  (msg) => {

    console.log(msg);

  },

  (x, y, width, height) => {

    console.log(x + ':' + y + ':' + width + ':' + height);

  }

);

本地模块应该只调用一次回调。 但是，它可以存储回调并稍后调用它。

突出显示在本地函数完成后不立即调用回调是非常重要的 - 请记住，桥接通信是异步的，这也与运行循环有关。

承诺(Promises)

原生模块也可以履行承诺，这可以简化您的代码，特别是在使用ES2016的异步/等待语法时。 当桥接本地方法的最后一个参数是Promise时，其相应的JS方法将返回一个JS Promise对象。

重构上面的代码来使用promise而不是回调看起来像这样：

import com.facebook.react.bridge.Promise;

public class UIManagerModule extends ReactContextBaseJavaModule {

...

  private static final String E_LAYOUT_ERROR = "E_LAYOUT_ERROR";

  @ReactMethod

  public void measureLayout(

      int tag,

      int ancestorTag,

      Promise promise) {

    try {

      measureLayout(tag, ancestorTag, mMeasureBuffer);

 

      WritableMap map = Arguments.createMap();

 

      map.putDouble("relativeX", PixelUtil.toDIPFromPixel(mMeasureBuffer[0]));

      map.putDouble("relativeY", PixelUtil.toDIPFromPixel(mMeasureBuffer[1]));

      map.putDouble("width", PixelUtil.toDIPFromPixel(mMeasureBuffer[2]));

      map.putDouble("height", PixelUtil.toDIPFromPixel(mMeasureBuffer[3]));

 

      promise.resolve(map);

    } catch (IllegalViewOperationException e) {

      promise.reject(E_LAYOUT_ERROR, e);

    }

  }

...

该方法的JavaScript对应方返回一个Promise。 这意味着您可以在异步函数中使用await关键字来调用它并等待其结果：

async function measureLayout() {

  try {

    var {relativeX, relativeY, width, height} = await UIManager.measureLayout(

      100,

      100

    );

    console.log(relativeX + ':' + relativeY + ':' + width + ':' + height);

  } catch (e) {

    console.error(e);

  }

}

measureLayout();

线程(Threading)

原生模块不应该对它们被调用的线程有任何假设，因为当前的分配将来可能会发生变化。 如果需要阻塞调用，则应该将繁重的工作分派给内部管理的工作者线程，并从那里分配任何回调。

 

转载于:https://my.oschina.net/todaybamboo/blog/1608341

chengu1323
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android之React Native平台与Android本地模块之间的调用
码莎拉蒂
10-28 5665
Native 模块(Android)          有时候APP需要做出React Native平台没有的功能，你也许会想用一些存在的java代码去解决问题，而不是用javascript脚本去去解决问题，或许写一些高性能，多线程的代码，列如图片处理，数据库，或者任何先进的继承                   我们设计React Native的目的是尽可能 让你可以写一些真正的原生代码
React Native学习之Android的返回键BackAndroid详解
08-29
这篇教程将详细介绍如何在React Native应用中有效地使用`BackAndroid`（或`BackHandler`）来处理返回键行为。 首先，`BackAndroid`的`addBackAndroidListener`方法用于添加一个监听器，以便在用户按下返回键时执行...
探索react native首屏渲染最佳实践
weixin_34307464的博客
03-20 145
1.前言 react native给了我们使用javascript开发原生app的能力，在使用react native完成兴趣部落安卓端发现tab改造后，我们开始对由react native实现的界面进行持续优化。目标只有一个，在享受react native带来的新特性的同时，在体验上无限逼近原生实现。作为一名前端开发，本文会从前端角度，探索react native首屏渲染最佳实践...
React Native Android原生模块使用（获取Android手机通讯录的数据）
choujianpi4487的博客
06-19 900
使用React Native开发App时会遇到需要用到一些Android原生模块，比如：访问相册、通讯录、日历等等。下面主要是以获取Android手机通讯录的数据为例，讲解React Native Android原生模块的使用。 注：数据格式可自行做修改。 React Native ...
react native : measure 获取view 宽高位置/坐标
火星男孩的分享空间
06-22 2622
import React, {Component} from 'react'; import { Text, TouchableOpacity, UIManager, findNodeHandle, View, } from 'react-native'; export default class TextMeasure extends Component { UNSAFE_componentWillMount() { let that = t.
React Native 如何实现吸顶效果
GuoguoDad的博客
08-26 2434
上个月接到一个需求对会员的数据展示、统计。这个也不复杂，当时定的技术是使用react-native实现，有吸顶的效果，在实现的过程中遇到的问题就记录一下。实现1是通过官方的api实现，动画效果更好，使用也简单些，缺点存在平台兼容问题实现2是通过监听滚动，控制显示与隐藏，所以兼容性很好，缺点就是动画效果需要自己实。...
React Native 环境搭建的教程
08-29
在本篇文章中，我们将详细介绍 React Native 环境搭建的教程，帮助大家快速上手 React Native 开发。 环境搭建 要搭建 React Native 环境，需要安装 Node、Watchman、Yarn 和 RN 命令行工具。推荐安装 react-...
ReactNative踩坑之配置调试端口的解决方法
08-29
ReactNative踩坑之配置调试端口的解决方法 ReactNative是一款流行的跨平台移动应用程序框架，但是在实际开发中，我们经常会遇到各种问题，例如配置调试端口的解决方法本篇文章旨在解决这个问题，并提供了一些有用的...
移动开发之跨平台技术Flutter和React Native技术选编
最新发布
01-18
移动跨平台开发已经成为现代应用程序开发的关键趋势，Flutter和React Native作为两大主流框架，为开发者提供了在iOS和Android之间构建高质量应用的解决方案。本篇将详细探讨这两个框架的主要特点、实战应用以及最新...
react-native-eyepetizer：React Native仿开眼3.1.2版本
02-05
版权声明：此处为Marno原创，转载必须在明确位置注明出处！转载地址： ://gold.xitu.io/post/589e8580b123db16a3d0dd3a注：原创不易，欢迎【欣赏...前段时间写了一篇关于React Native入门的教程 ，总结了一下我在学习R
Memory Type: WB, WT, UC, WC，WP
Keep Fighting!
09-05 3499
Memory Type： 目前的主流处理器，都支持这些memory type Write Back, Write Through, Write Protect,Uncacheable Write, Write Combine Write Back 最常见的 cacheable write， read → modify→ write Write Through cachable read write： when hit in cache, update cache and memory when miss
React Native开发专题介绍
watertekhqx的博客
04-28 1452
今天我们继续来看一下原生模块的一些特性例如:回调方法函数,Promises,多线程,事件发送到JavaScript,监听生命周期事件,获取Activity Result等相关的特性。当前所讲解内容适配Android开发。 本示例代码地址:https://github.com/jiangqqlmj/NativeModules1 刚创建的React Native技术交流4群(4589827
Measure、Layout和Draw过程分析
旭哥的专栏
08-27 813
Android应用程序窗口的绘图表面在创建完成之后，我们就可以从上到下地绘制它里面的各个视图了，即各个UI元素了。不过在绘制这些UI元素之前，我们还需要从上到下地测量它们实际所需要的大小，以及对它们的位置进行合适的安排，即对它们进行合适的布局。 Android应用程序窗口请求SurfaceFlinger服务创建了一个绘图表面之后，就可以接着请求为该绘图表面创建图形缓冲区，而当Android应用程序窗口往这些图形缓冲区填充好UI数据之后，就可以请求SurfaceFlinger服务将它们渲染到硬件帧缓冲区中去，
React Native之onLayout属性
我的博客
11-01 9832
RN通过onLayout属性获取当前组件的位置和属性信息
react native测量组件的宽高
大灰狼的小绵羊哥哥的博客
04-05 4153
很多人在做布局的时候，发现Text的宽高不好测量，布局不好处理，现我将方法和RN的相关源码列出来，供大家参考： http://www.jianshu.com/p/3b36120ec5d8 1、测量Text的宽高     1.1  方法一 ：onLayout     首先在view中有个onLayout方法，这里面携带的就有宽高信息： 代码如下： th
React Native - 组件的引用详解（附：setNativeProps、measure方法介绍）
大灰狼的小绵羊哥哥的博客
10-20 2226
通常情况下，我们对组件的使用逻辑是：当某个组件出现需要处理的事件时，由这个组件自己上报该事件，然后在对应的事件处理代码对事件进行处理。 但有些情况下，我们也需要直接对组件进行操作。这个时候，我们就需要先得到组件引用，进而通过该引用对组件进行操作。 一、组件引用 1，普通组件的引用 在某个组件的 JSX 代码描述中加入 ref={某字符串}，就可以定义一个组件的引用名称。
React Native UI布局总结
热门推荐
jj120522的专栏
07-10 1万+
1.在React Native（RN）中提供了只有两种布局，分别是：absolute和relative。 如果你之前是搞安卓开发的会觉得RN设计非常怪异，在我们安卓原生开发中，决定用什么布局的是由parent决定的，如：AbsoluteLayout和RelativeLayout,而在RN开发中，决定用什么布局的是有child来决定的。 比如: 这样Text组件相对于外层parent组件是相对
ReactNative 测量组件的宽度，高度，位置。
陌路旧梦
02-29 666
1.测量组件的宽度，高度，位置。 setTimeout(() => { UIManager.measure(findNodeHandle(this.myComponent), (x, y, width, h, pageX, pageY) => { console.log('x:' + x); console.log('y:' + y); ...
React Native原生模块与JS模块通信的几种方式
fengyuzhengfan的专栏
09-29 6109
React Native原生模块向JS传递数据的几种方式(Android)在做React Native开发的时候避免不了的需要原生模块和JS之间进行数据传递，这篇文章将向大家分享原生模块向JS传递数据的几种方式。方式一：通过Callbacks的方式说起Callbacks大家都不陌生，它是最常用的设计模式之一。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值