文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    React Native 集成鸿蒙系统：从环境搭建到跨设备协同实战

    14+ 兼容性最佳，同时适配鸿蒙 ohpm 包管理器 DevEco Studio：3.1.0.501+（支持 ArkUI 3.0 桥接 API），RN 版本：0.72.6（经实测与鸿蒙兼容性最优） 2....勾选 ArkUI 3.0+ 开发工具 和 跨设备协同 SDK 安装 RN 核心依赖：npm install react-native@0.72.6 react@18.2.0 二、通信方案：鸿蒙 Ability...端调用鸿蒙原生模块 在 RN 组件中通过 NativeModules 调用桥接接口： import { NativeModules, Button } from 'react-native'; const...实战步骤 （1）配置跨设备权限（config.json） 在鸿蒙应用 config.json 中添加分布式权限： { "module": { "reqPermissions": [ { "name...: { "start": "react-native start", "android": "react-native run-android", "harmony": "react-native

    50110

    React Native 混合开发(iOS篇)

    混合开发的一些其他应用场景： 在原有项目中加入RN页面，在RN项目中加入原生页面 ? 原生页面中嵌入RN模块 ? RN页面中嵌入原生模块 ?...React Native混合开发的教程我们分为上下两篇，上篇主要介绍如何在现有的Android应用上进行React Native混合开发，下篇主要介绍如何在现有的iOS应用上进行React Native...React Native项目； 通过npm安装react-native的方式添加一个React Native项目 第一步：创建一个名为RNHybrid的目录，然后在该目录下添加一个包含如下信息的package.json...初始化时传递给JS的初始化数据，它的具体用法我会在React iOS 混合开发讲解的视频教程中再具体的讲解； 5....中根据需要加载指定名字的RN组件即可。

    9.6K50

    新版React Native 混合开发(Android篇)

    此教程适配了0.62.2及以上版本的react-native，为获取最新适配教程，可关注配套教程)。 混合开发的一些其他应用场景： 在原有项目中加入RN页面，在RN项目中加入原生页面 ?...原生页面中嵌入RN模块 ? RN页面中嵌入原生模块 ? 以上这些都属于React Native混合开发的范畴，那么如何进行React Native混合开发呢？...React Native混合开发的教程我们分为上下两篇，上篇主要介绍如何在现有的Android应用上进行React Native混合开发，下篇主要介绍如何在现有的iOS应用上进行React Native...React Native项目； 通过npm安装react-native的方式添加一个React Native项目 第一步：创建一个名为RNHybridApp的目录，然后在该目录下添加一个包含如下信息的package.json...初始化时传递给JS的初始化数据，它的具体用法我会在React Android 混合开发讲解的视频教程中再具体的讲解； 在中AndroidManifest.xml注册一个RNPageActivity Android

    8.7K30

    再谈移动端跨平台框架 Flutter 与 React Native

    SDK 版本 Flutter: 2.5.x React Native: 0.64.x 架构 ====== 1.1 设计理念 在端上的开发，有前辈总结了一个很精辟的观点：端上的开发无外乎三件事，“数据获取...将原先较重的 Bridge 分拆成两个模块，Farbric 处理 UI，TurboModules 处理与原生交互 两个模块均是遵循 JSI 协议的 C++ 模块 核心流程 ======== 2.1 数据获取...React Native RN 是在通过 Yoga （布局引擎）计算好后位置后，通过不同平台的渲染管道进行渲染，所以这里在 Layout 计算与投递结果的过程中多了 Bridge 环节，效率可想而知。...嵌入 Fluttter 如 Flutter Demo 所示一样，它可以被嵌入任何 Activity 或 ViewController 中。...预热的时间消耗大概是在 300ms 左右（参考官方数据） React Native React Native 与 Native 原生的控件互嵌相对比较容易。

    2.7K30

    React Native 混合开发(Android篇)

    React Native混合开发的教程我们分为上下两篇，上篇主要介绍如何在现有的Android应用上进行React Native混合开发，下篇主要介绍如何在现有的iOS应用上进行React Native...React Native项目； 通过npm安装react-native的方式添加一个React Native项目 第一步：创建一个名为RNHybridApp的目录，然后在该目录下添加一个包含如下信息的package.json.../local-cli/cli.js start" } } 第二步：在为package.json添加react-native 在该目录下执行： npm install --save react-native...Native Moudle也需要通过addPackage的方式将其注册到RN中。...初始化时传递给JS的初始化数据，它的具体用法我会在React Android 混合开发讲解的视频教程中再具体的讲解； 在中AndroidManifest.xml注册一个RNPageActivity Android

    5.2K30

    React Native 鸿蒙跨平台应用开发实践：每日早报

    随着华为鸿蒙（HarmonyOS）生态的快速发展，如何在保持现有 React Native 开发经验的同时，将应用扩展到鸿蒙平台，成为了许多开发团队面临的新挑战。...oh-react-native 社区信息和技术特色 每日早报功能：通过 ALAPI 获取实时新闻资讯 图片查看器：支持大图查看和交互操作 技术架构分析 技术栈组成 { "核心框架": { "...response.data.code === 200) { setNewsData(response.data.data); } else { Alert.alert('错误', '获取早报数据失败.../react-native-harmony 包实现鸿蒙适配： // package.json 中的关键依赖 "@react-native-oh/react-native-harmony": "^0.72.86...环境搭建指南 教你一招：鸿蒙版 RN 应用，包体积直接减半 作者：坚果 时间：2025 年9月 标签：React Native, 鸿蒙系统, 跨平台开发, HarmonyOS, 移动开发

    31610

    2022 年 React Native 的全新架构更新

    ； image 在 RN 里 JS 线程和 Native 线程之前是通过 bridge 来交互，而交互的数据必须被转化为 JSON，而这个桥只能处理异步通信。...) 目前 RN 使用 Bridge Module 来让 JS 和 Native 线程进行通信，每次利用 Bridge 发送数据时，都需要转换为 JSON， 而收到数据时也需要进行解码。...（例如：RN 里的 会变成 Android 中的 ViewGroup 和 iOS 中的 UIView）。...使用新的 Fabric 渲染，用户交互（如滚动、手势等）可以优先在主线程或 Native 线程中同步执行，而 API 请求等其他任务使用异步执行。...react-native-skia 还有不少问题需要解决，但是它让 RN 可以更高效地使用丰富的 Canvas 能力，对于 RN 的未来而言不免是一次不错的尝试。

    2.6K20

    React Native运行原理解析

    扩展的API， 则直接通过bridge调用native方法; 如果是UI界面， 则映射到virtual DOM这个虚拟的JS数据结构中，通过bridge 传递到native ， 然后根据数据属性设置各个对应的真实...MyReactPackage， 配置当前APP 需要加载的模块，RN 的JS框架会在初始化阶段就会把native的模块按照配置加载到JS数据结构中（MessageQueue), 从而才能在JS 层即可直接判断...但RN的通信的实现机制是单向调用，Native线程定期向JS线程拉取数据， 然后转成JS的调用预期，最后转交给Native对应的调用模块。...JS 调用require('NativeModules')实际上是获取MessageQueue里面的一个native模块列表的属性, 如： ? ?...至此， JS端调用完毕， queue中数据要等待Native层通过bridge来取。

    6.8K90

    react-native-easy-app 详解与使用之（二） fetch

    重新封装了RN的View、Text、Image、FlatList 使用得这些控件在适当的时候支持事件或支持icon与文本，能有效减少布局中的嵌套逻辑。 4....(error) { console.error(error); } RN平台的fetch请求很简洁，那我们再看看react-native-easy-app的请求 XHttp是不是也可以方便快捷的发送请求呢...json => Json Object | originText 默认为请求返回的json对象，必要时可以指定返回纯文本字符串（若请求结果为非标准Json，如XML结构或其它）或通过自定义配置指定请求返回的数据结构...每个app都有一套前后台数据交互方式，对于返回的数据都有统一固定的格式：方便前端解析处理，如 cryptonator.com 网站提供的比特币查询接口，接口url：https://api.cryptonator.com...，你可以从里取到任何想要的数据，包括headers const url = 'https://facebook.github.io/react-native/movies.json'; XHttp()

    3.4K10

    React Native 开发心得分享

    是否有必要学 react-native？​ 先说一个结论：RN ≠ 原生，别指望会个 react 就能写出靠谱的原生应用。...Expo​ Expo 是基于 React Native 并整合大量常用的 native module(Expo SDK)，像原生的功能如相册，相机，蓝牙等功能，在 expo 都是直接集成的，相当于封装原生的...假设后端 api 地址为 [http://localhost:6001](http://localhost:6001)，正常情况下，开发环境下的调试主机可以通过如下方式获取 import Constants...react-native-reanimated RN 动画库，没啥好说的。 以上组件库可以说基本必装，能为 RN 应用使用体验提升一个档次。...React Navigation​ 在这个库你可以实现几乎所有的原生布局，如底部 tabs，左侧抽屉等，expo 是在此基础上进行包装的。

    2.5K31

    二十分钟封装，一个App前后台Http交互的实现

    在React Native开发过程中，几乎所有的app都需要使用到Http请求，所以fetch的封装必不可少，由于不同app的请求参数，解析规则，token机制等完全不一样，所以在大多数App开发中，...---- 为了演示，先用 react native init HttpTestDemo 创建一个RN项目：示例项目：HttpTestDemo 修改并删除不必要的布局或资源，结果如下： quv586y8t8...；get请求 api/refreshToken 必须参数refreshToken；请求内容类型为：application/json；get请求 https://react-native-easy-app.oss-cn-beijing.aliyuncs.com.../api/login https://react-native-easy-app.oss-cn-beijing.aliyuncs.com/api/userInfo https://react-native-easy-app.oss-cn-beijing.aliyuncs.com.../api/refreshToken 按 react-native-easy-app 的说明文档，安装库：npm install react-native-easy-app --save 定义一个持久化对象

    1.7K10

    React Native实践有感

    依赖库的升级维护 RN项目中经常会用到很多第三方库，比如路由框架react-navigation、数据存储AsyncStorage、状态管理react-redux等等。...0.63版本会导致react-navigation老版本中的依赖库react-native-safe-area-view报错。...总之，RN和第三方依赖库版本太老长时间不升级会带来很多问题，如老API过时、新API变动太大，iOS、Android系统更新带来的兼容性问题都需要解决，升级应该作为一个task经常关注并适时执行。...慎用RealmJSRealm是一个开源的移动端数据库，性能表现非常不错，API也简单易用。...--assets-dest ios 为了build方便，可以将脚本写到package.json的scripts中，取个别名如ios-bundle，之后可以直接使用npm run ios-bundle进行打包

    3.5K10

    RN集成到Android原生项目实践

    2.在项目根目录下引入React Native模块 在AS中的Terminal中输入npm init ,输入一些项目的描述属性(默认一路回车也行)，为了生成·文件的项目描述，根据提示来填写就好了,生成的...": "^16.5.2", "react-native": "^0.55.4" } } 3.引入rn的一些模块文件 npm install --save react...react-native 会在根目录生成一个node_modules文件夹，存的是RN的一些模块文件，如果在这个过程中出现require react@某.某.某版本, but none was installed...注意：如何安装React Native指定版本，命令如：npm install --save react-native@0.55.4 ，这里建议使用因为最新版本使用可能会出错，稍微比新版低个版本，我这里没用最新版...Native界面,收到数据：" + msg; ToastAndroid.show("发送成功", ToastAndroid.SHORT); }) } render() { return

    3.2K20

    判断js引擎是javascriptCore或者v8

    来由   纯粹的无聊，一直在搜索JavaScriptCore和SpiderMonkey的一些信息，却无意中学习了如何在ios的UIWebView中判断其js解析引擎的方法： if (window.devicePixelRatio...js的参数（序列化的json字符串），在oc端进行反序列化，最后调用oc的函数；     2）oc端的stringByEvaluateJavascriptString在执行js代码时会阻塞js端代码的执行...2，目前有三种方案实现oc与js通信，第一种继续使用cordova的通信机制，也就是目前比较流行的UIWebView；第二种采用React Native的通信机制，使用iOS7内置的javascriptCore...框架，不同于React Native的是使用jsc提供的通信机制，这套机制类似于android下WebView编码方式，oc端只需实现JSExpose协议，就将实现该协议的对象透到当前的上下文中，如在UIWebView...3, 综上三种方案，第一种代价最低，而且流程比较完善，而且已经系统化，但是性能是硬伤；第二种则是非常好的借鉴，RN的方式不仅仅适用于javascriptCore，而且也适用于其他引擎如SpiderMonkey

    4K50

    干货 | 携程租车React Native单元测试实践

    1.2 Enzyme Enzyme是AirBnb开源的React测试工具库，通过一套简洁的api，可以渲染一个或多个组件，查找元素，模拟元素交互（如点击，触摸），通过和Jest相互配合可以提供完整的...": "^7.0.0", "jest-react-native": "^18.0.0", //RN支持，非RN可以不装 "react-test-renderer": "16.9.0",...七、Jest 异步测试 Jest单元测试是同步的，因此面对异步操作如fetch获取数据，需要进行异步的模拟测试。...单元测试 在React Native v0.59版本以后，RN也支持了React Hooks的开发，由于Enzyme对于Hooks的测试支持不理想，我们专门引入了react-hooks-testing-library...在携程租车前端单元测试的实践中，我们总结出几个要点： 将待测试的组件当成黑盒，不用考虑内部逻辑实现； UI改动频繁，优先保证公用组件，工具函数，核心代码的单元测试； 模拟数据尽量真实； 多考虑边界条件情况

    7.6K30

    UI前端同学回来抢经验，react native开发实战五部曲的实战与锤炼，咬牙学完保证变大牛！

    背景 现在很多移动项目全都专项纯rn开发，对于rn的应用趋势不言而喻，学习一些rn的语法并不是十分困难，但是如何在项目中灵活运用，增加实战项目经验，这还是比较困难的。...所以本套课程重点在于通过几个移动项目来体会rn的优劣势，以便于提高同学们的rn的实战经验，在实际工作中或者面试中能更有竞争力。...React native介绍 React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物...课程预热 第02章 初始 React Native 第03章 RN 入门知识学习 第04章 项目初始准备 第05章 开发视频配音页面 第06章 RN 知识串讲 第07章 App 内注册登录 第08章 用户账户页面...第09章 用Koa 开发本地API后台 第10章 开发视频配音页面 第11章 App上线准备工作 项目三:app端pc端媒体资讯app项目实战 第1章 课程简介 第2章 React 简介 第3章 React

    2.1K60

    从Hybrid到React-Native: JS在移动端的南征北战史

    只要你动了这三个方法，它们传递的数据就会被外部的WebChromeClient拦截和获取，这就为JS调Android的代码提供了一种方便的渠道。哎呀，三个方法这么多选哪个呢？...这个东东还是和上面是一样的，Android的WebChromeClient控件这个类，它有个shouldOverrideUrlLoading这个方法，这个方法可以把控件内部网页的JS的Url请求给拦截了，当然了，你写在Url中的数据也同时被一并获取了...UI线程：也成为主线程，负责本机的Android/iOS的UI呈现，在android中它负责android测量/布局/绘制 JS线程：执行JS/React代码，进行API调用，处理触摸事件等，...对视图的更新被进行批处理，并在事件循环结束时发送给UI线程 Shadow线程：处理虚拟DOM布局变更的线程 本机模块线程： 如android/ios系统自带的原生API RN的3部分...RN的Web化:react-native-web react-native-web 组件的内部，会把 React Native 的 API 映射成了浏览器支持的 API。

    4K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券