有时候App需要访问平台API，但React Native可能还没有相应的模块包装；或者你需要复用一些Java代码，而不是用Javascript重新实现一遍；又或者你需要实现某些高性能的、多线程的代码，譬如图片处理、数据库、或者各种高级扩展等等。 我们把React Native设计为可以在其基础上编写真正的原生代码，并且可以访问平台所有的能力。这是一个相对高级的特性，
转载
2024-07-24 06:00:27
65阅读
一：原生传递参数给React Native1：原生给React Native传参原生给JS传数据，主要依靠属性。通过initialProperties，这个RCTRootView的初始化函数的参数来完成。RCTRootView还有一个appProperties属性，修改这个属性，JS端会调用相应的渲染方法。我们使用RCTRootView将React Natvie视图封装到原生组件中。RCTRoot
转载
2023-09-12 20:51:46
180阅读
今天,记录一下iOS原生和React-Native之间的交互. 先看一下怎么在iOS原生中集成react-native模块.iOS原生和React-Native之间的交互主要通过NativeModules实现.先看RN->iOS原生开发环境版本:准备: 终端新建一个react-native项目或者使用上一篇文章建立的demo.a.先使用Xco
转载
2023-07-25 11:40:28
221阅读
按照个人理解，RN和Android原生混合开发分为两种情况，第一种是以RN为主，原生为辅的混合开发，第二种则是以原生为主RN为辅的混合开发，最近几篇文章尽量以这两种情况区分，做一个大概整体的梳理 这篇文章主要讲一下以RN为主 调用Android原生函数的基本使用方法，先上图 下面看具体流程：1，新建项目，在命令行初始化一个RN项目，这一步比较简单 就不贴图了2、 Android原生部分代码，分
转载
2023-10-21 09:10:56
374阅读
一 上一篇文章我们讲解了Android项目集成ReactNative官方推荐实现以及涉及的坑二 以Android项目为主这种将在已有Android 项目中集成React-Native 项目，是在原来Android项目中添加 RN项目，不会修改 Android项目的外层结构。大概结果如下：1.Android 环境搭建新建一个Android 项目“Android_With_RN"2.配置React-N
前提：已安装配置好Java SDK，搭建好Androidstudio开发环境，安装配置好Node.js Java SDK: 1.8.0_31 AndroidStudio: 3.4 Node: v8.12.0 react-native-cli: 2.0.1 react-native: 0.50.4一、创建AndroidStudio项目 二、集成ReactNat
转载
2023-07-14 13:42:20
148阅读
在原生和React Native间通信 通过植入原生应用和原生UI组件两篇文档，我们学习了React Native和原生组件的互相整合。在整合的过程中，我们会需要在两个世界间互相通信。有些方法已经在其他的指南中提到了，这篇文章总结了所有可行的技术。简介React Native是从React中得到的灵感，因此基本的信息流是类似的。在React中信息是单向的。我们维护了组件层次，在其中每个组件都仅依
# React Native iOS原生交互指南
在移动应用开发中，React Native是一个流行的框架，它允许开发者使用JavaScript构建跨平台的应用；然而，有时我们需要与原生模块进行交互来访问某些需要特权的功能，比如摄像头、蓝牙等。本文将引导你如何在React Native中实现iOS原生交互，从流程到代码示例都一一介绍。
## 整体流程
下面是实现React Native与i
ReadableMap主要是rn给原生传递参数时使用 （1）rn给原生传递参数 toast = () => { let obj={ id:1, name:"xiaohong" }; NativeModules.TestModules.Toasts(obj); };（2）原生中获取数据 @ReactMethod public void Toasts
原创
2022-08-19 12:57:43
394阅读
# React Native桥接IOS原生
React Native是一种用于构建跨平台移动应用程序的开源框架，它允许我们使用JavaScript编写应用程序，并在不同的平台上进行部署。然而，有时候我们需要使用一些原生功能，例如访问设备传感器、调用本地存储等。这时，我们就需要使用React Native桥接原生代码来实现这些功能。
## 为什么要桥接原生代码？
React Native提供了
原创
2024-01-19 08:02:45
228阅读
博文目录一、概述二、使用react-native-scrollable-tab-view插件三、属性及方法介绍四、Demo五、注意事项六、拓展阅读 一、概述react-native-scrollable-tab-view 标签导航组件可实现点击切换，每个 tab 可以有自己的 ScrollView，点击切换的时候可以维护自己的滚动方向。二、使用react-native-scrollable-ta
React-native 使用native第三方sdkios(以阿里百川用户反馈为例)首先安装cocopods(类似于npm，ios开发的依赖管理工具，教程：http://www.code4app.com/artic...在ios根目录下创建Podfile文件，添加如下代码(使用的是百川feedback1.1.1版本)，然后执行pod install命令target ‘Xss’ dopod 'YW
转载
2024-10-24 16:01:24
60阅读
官网：react官方网站一.React可以克服原生JS的以下缺点：1.原生JS操作DOM繁琐且效率低，因为用DOM-API操作UI；2.JS直接操作DOM会使浏览器进行大量的重绘重排；3.原生JS没有组件化编码方案，代码复用率低二.React特点采用组件化模式，声明式编码，提高开发效率及组件复用率;在React Native中可以使用React语法进行_移动端开发_；使用虚拟DOM+优秀的Diff
ReactNative 调用Android 原生（一）——原
原创
2022-08-19 20:18:31
497阅读
很多同学用react开发的时候，真正用到的React的api少之又少，基本停留在Component,React.memo等层面,实际react源码中，暴露出来的方法并不少，只是我们平时很少用。但是React暴露出这么多api并非没有用，想要玩转react,就要明白这些API究竟是干什么的，应用场景是什么，今天就让我们从react 到 react-dom,一次性把react生产环境的暴露api复习个
一、React Native背景有没有朋友想过一个问题，为什么取名React Native?React是什么，Native又是什么？ReactReact 是由Facebook推出的一个JavaScript框架，主要用于前段开发。React 采用组件化方式简化Web开发DOM:每个HTML界面可以看做一个DOM原生的web开发方式，HTML一个文件，javaScript一个文件，文件分开，就会导致修
转载
2024-10-16 06:46:11
28阅读
# 在React Native中打开Android原生页面的指南
React Native是一种流行的框架，可以让开发者用JavaScript构建高性能的移动应用。在某些情况下，开发者可能需要访问原生Android页面，以利用原生功能或更复杂的UI组件。在本文中，我们将详细探讨如何在React Native中打开Android原生页面，并提供相关代码示例。
## 1. 为什么要访问原生页面？
emmm…… 先说个题外话，时隔一年，再遇RN，较之以前唯一不同的一点就是遇到的坑终于有人先踩了本文会通过原生与RN页面相互跳转、方法间的相互调用、以及H5页面调用原生页面进而调用RN页面等方面来阐述原生与RN间的通信。不要疑惑为啥子会有这种撒娇三连的操作，我也只能摊手道：存在即合理(无奈╮(╯▽╰)╭.gif)。 一、原生与RN通信先做点准备工作叭~ 通过`react-native
简介一共4步：1、新建rn项目，并用AndroidStu
原创
2022-08-19 20:18:59
724阅读
之前做过android地图开发，在自己的APP里集成第三方的地图sdk(百度，高德，腾讯，搜狗等)，来实现导航，基于LBS周边搜索，定位，路线规划等功能需求，这种方法比较麻烦。同时还增加了app的体积，还有如果这个第三方地图软件的sdk更新了，那你自己的app还的做相应的更新，在react-native这种方法估计也可以，但是没去尝试，因为需求简单，就是实现导航，所以就用了接下来介绍这种方法
转载
2023-11-20 13:06:25
43阅读
