React Native 桥接原生常量

最新推荐文章于 2024-09-26 16:26:52 发布
最新推荐文章于 2024-09-26 16:26:52 发布
阅读量524 收藏 9
点赞数 10
文章标签： react native react.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44721831/article/details/135512723
版权
本文介绍了如何在SmallDaysAppModule中编写并注册原生常量方法，以便在JS层通过ReactNative进行同步调用。通过桥接，JS可以直接获取并使用自定义的原生常量。
摘要由CSDN通过智能技术生成

一、编写并注册原生常量方法

在 SmallDaysAppModule 这个模块中有一个方法 getConstans ，重载这个方法就可将自定义的常量返回，系统会自行调用该方法并返回定义的常量将其直接注入到 JS 层，在 JS 层直接获取即可。

在这里插入图片描述

二、JS 层获取原生常量（同步）

在 JS 层只需要从 SmallDaysApp 中解构出自定义的常量即可。

在这里插入图片描述

效果如下：

在这里插入图片描述

相关链接：
React Native 桥接原生实现 JS 调用原生方法

gxhlh
关注
React-Native与原生的模块桥接（一）
asddavid的专栏
11-30 3414
React-Native 与原生Android的模块桥接
React Native 桥接原生原子组件
kiku
01-11 1317
React Native 桥接原生原子组件，实现在 JS 层使用自定义原生组件
React Native 桥接组件封装原生组件属性
kiku
01-12 564
自定义属性可以让组件具备更多的灵活性，所以有必要在JS 层通过自定义属性动态传值。
React Native桥接Android模块-Activity
Donkey的博客
03-02 738
React Native桥接Android模块-Activity 1.创建模块类 public class RNManagerModule extends ReactContextBaseJavaModule { private Context mContext; public RNManagerModule(ReactApplicationContext reactContext...
React Native桥接Android模块-用Promise机制调用安卓原生代码
Donkey的博客
03-02 1145
React Native桥接Android模块-用Promise机制调用安卓原生代码 1.创建模块类 public class RNManagerModule extends ReactContextBaseJavaModule { private Context mContext; public RNManagerModule(ReactApplicationContext re...
React Native桥接Android模块-callback回调方式
Donkey的博客
03-02 874
React Native桥接Android模块-callback回调方式 1.创建模块类 public class RNManagerModule extends ReactContextBaseJavaModule { private Context mContext; public RNManagerModule(ReactApplicationContext reactCon...
React Native桥接Android模块-多线程RNDeviceEventEmitter方式
Donkey的博客
03-02 1113
React Native桥接Android模块-多线程RNDeviceEventEmitter方式 1.创建模块类 public class RNManagerModule extends ReactContextBaseJavaModule { private Context mContext; public RNManagerModule(ReactApplicationCon...
React Native桥接Android模块-RN获取Activity回调
Donkey的博客
04-20 1048
React Native桥接Android模块-RN获取Activity回调 1.创建模块类 public class RNManagerModule extends ReactContextBaseJavaModule { private Context mContext; private static final int REQUEST_CODE = 1; public...
React Native桥接Android模块-Toast
Donkey的博客
12-06 326
React Native桥接Android模块-Toast 1.创建模块类 public class RNManagerModule extends ReactContextBaseJavaModule { private Context mContext; public RNManagerModule(ReactApplicationContext reactContext) {...
React Native与原生模块、组件之间的关系浅析（二）
非動ご博客
07-09 536
那么书接上回，今天主要是继续探究React Native与原生模块的架构方式。 原生模块 原生模块可以访问activity、运行环境、GPS、存储空间等。原生模块就是能够在JavaScript层调用的API。 因为对原生模块的全部请求都要异步执行。如果原生方法需要为JavaScript层的调用返回数据，该操作将通过promise或者回调函数来完成。React Native为这两种方式都提供了...
React Native创建原生模块
寒江蓑笠的专栏
03-01 2011
在React Native开发过程中，有时候我们可能需要访问平台的API，但React Native还没有相应的实现，或者是React Native还不支持一些原生的属性，我们需要调用原生代码来实现，或者是我们需要复用一些原来的Java代码，这个时候我们就需要创建一个原生模块来自己实现对我们需要功能的封装。 可以参考官方文档或中文文档。开发模块实现模块下面我们就通过实现一个自定义模块，来熟悉编
React Native 与iOS的通信
一步一迹的博客
12-13 6921
RN可以很好的与原生进行交互，我们首先看看效果吧： 首先我们来看看React Native 怎样调用iOS的代码并且带有简单的参数： 在iOS工程里面我们新建一个类iOSExport，iOSExport将会实现RCTBridgeModule协议。 首先我们要在iOSExport类的实现中添加这句宏定义：RCT_EXPORT_MODULE() RCT_EXPORT_MODULE()如果你不传入
加载一个react native 页面
ohyeahhhh的博客
01-23 3405
要在原生app中加载js视图，首先要先将js资源文件加载到app中，然后使用一个原生类的实例作为容器承接js定义的视图，最后将这个容器类实例添加到原生视图中。加载JS Bundlejs代码是以JS Bundle的形式保存的，在app中使用js中定义的组件、方法之前，首先要加载JS Bundle。1.获取JS bundle的资源路径 如果url已知那就跳过这一步，如果不知道url应该是怎样的可以看
React Native中的混合开发与原生交互
React Native是一种用于构建原生移动应用的JavaScript框架。它使用React的组件化思想，通过JavaScript和React的语法来编写移动应用，同时支持跨平台开发。混合开发是指在React Native应用中同时使用原生代码和...
React Native、Uni-app、Flutter优缺点对比
low神
09-26 1198
React Native、Uni-app、Flutter作为三种主流的跨平台开发框架，各自具有独特的优缺点。以下是对这三种框架的优缺点进行的详细对比。
React Native中如何调用iOS的Face ID和Android的生物识别，react-native-biometrics
最新发布
low神
09-26 604
在React Native中调用Android和iOS的Face ID（iOS特有）或类似的功能（如Android上的生物识别，通常是通过指纹或面部识别），你需要分别处理两个平台，因为这两个操作系统提供的API和框架不同。react-native-biometrics
react通过下拉框选择多个，并展示在下方的方式
qq18346342939的博客
09-26 271
二、form及选择展示。
现代前端框架实战指南：React、Vue.js、Angular核心概念与应用
m0_67484548的博客
09-23 1458
现代前端框架实战指南：React、Vue.js、Angular核心概念与应用
使用React Native构建原生移动应用
"Learning React Native(O'Reilly,2015)" 是一本由 Bonnie Eisenman 编写的关于 React Native 的实战指南，旨在帮助开发者通过 JavaScript 构建和部署跨平台的原生感观移动应用，覆盖iOS、Android等平台。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gxhlh

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值