ReactNative的环境搭建

写在前面

React Native (RN) 是一个由 Facebook 开发的开源框架,用于构建跨平台的移动应用程序。它允许开发者使用 JavaScript 和 React 来创建原生 iOS 和 Android 应用。RN 的出现极大地简化了移动应用的开发过程,使得开发者可以更快速、更高效地构建高质量的应用。

在本文中,我们将详细介绍如何搭建 RN 的开发环境、如何将 RN 集成到现有的原生应用中,以及如何将 RN 集成到 Android Fragment 中。我们还将提供一些有用的提示和技巧,帮助你顺利完成这些任务。

搭建 RN 开发环境

要开始使用 RN,首先需要安装 Node.js 和 npm。然后,使用以下命令安装 RN 的命令行工具:

npm install -g react-native-cli

接下来,创建一个新的 RN 项目:

react-native init MyProject

这将生成一个名为 MyProject 的新项目。进入项目目录并启动开发服务器:

cd MyProject
react-native start

在另一个终端窗口中,运行以下命令来启动模拟器或连接到一个真实的设备:

react-native run-ios
# 或者
react-native run-android

现在,你已经成功搭建了 RN 的开发环境,并可以开始构建你的应用了。

将 RN 集成到现有的原生应用中

如果你已经有一个原生应用,并想在其中添加一些 RN 组件,以下是实现这一目标的步骤:

iOS
  1. 在 Xcode 中打开你的项目。

  2. 在项目中添加一个新的文件夹,用于存放 RN 代码。

  3. 在这个文件夹中,使用以下命令创建一个新的 RN 项目:

    react-native init RNModule
    
  4. RNModule 项目中的 index.js 文件复制到你的原生应用的文件夹中。

  5. 在你的原生应用的 AppDelegate.m 文件中,导入 RCTRootViewRCTBridgeModule

    #import <React/RCTRootView.h>
    #import <React/RCTBridgeModule.h>
    
  6. application:didFinishLaunchingWithOptions: 方法中,添加以下代码来初始化 RN 模块:

    RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridgemoduleName:@"RNModule"initialProperties:nil];
    self.window.rootViewController = [[UIViewController alloc] initWithView:rootView];
    
  7. 在你的原生应用的 Info.plist 文件中,添加以下键值对:

    <key>RNModule</key>
    <string>index</string>
    
  8. 在你的原生应用的 AppDelegate.m 文件中,实现 RCTBridgeDelegate 协议的 sourceURLForBridge 方法:

    - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {return [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
    }
    
  9. 运行你的原生应用,并在模拟器或真实设备上查看 RN 模块。

Android
  1. 在 Android Studio 中打开你的项目。

  2. 在项目中添加一个新的文件夹,用于存放 RN 代码。

  3. 在这个文件夹中,使用以下命令创建一个新的 RN 项目:

    react-native init RNModule
    
  4. RNModule 项目中的 index.js 文件复制到你的原生应用的文件夹中。

  5. 在你的原生应用的 MainActivity.java 文件中,导入 ReactActivityReactPackage

    import com.facebook.react.ReactActivity;
    import com.facebook.react.ReactPackage;
    
  6. MainActivity 类中,添加以下代码来初始化 RN 模块:

    @Override
    protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);ReactRootView reactRootView = new ReactRootView(this);ReactInstanceManager reactInstanceManager = ReactInstanceManager.builder().setApplication(getApplication()).setBundleUrl("http://localhost:8081/index.bundle?platform=android").addPackage(new MainReactPackage()).setInitialLifecycleState(LifecycleState.RESUMED).build();reactRootView.startReactApplication(reactInstanceManager, "RNModule", null);setContentView(reactRootView);
    }
    
  7. 在你的原生应用的 AndroidManifest.xml 文件中,添加以下权限:

    <uses-permission android:name="android.permission.INTERNET" />
    
  8. 运行你的原生应用,并在模拟器或真实设备上查看 RN 模块。

将 RN 集成到 Android Fragment 中

如果你想在一个 Android Fragment 中使用 RN 组件,以下是实现这一目标的步骤:

  1. 在你的 Android 项目中,创建一个新的 Fragment 类,例如 RNFragment

  2. RNFragment 类中,添加以下代码来初始化 RN 模块:

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {ReactRootView reactRootView = new ReactRootView(getContext());ReactInstanceManager reactInstanceManager = ReactInstanceManager.builder().setApplication(getActivity().getApplication()).setBundleUrl("http://localhost:8081/index.bundle?platform=android").addPackage(new MainReactPackage()).setInitialLifecycleState(LifecycleState.RESUMED).build();reactRootView.startReactApplication(reactInstanceManager, "RNModule", null);return reactRootView;
    }
    
  3. 在你的主 Activity 中,添加以下代码来将 RNFragment 添加到布局中:

    @Override
    protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);FragmentManager fragmentManager = getSupportFragmentManager();FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();fragmentTransaction.replace(R.id.container, new RNFragment());fragmentTransaction.commit();
    }
    
  4. 在你的布局文件中,添加一个 FrameLayout 用于容纳 RNFragment

    <FrameLayoutandroid:id="@+id/container"android:layout_width="match_parent"android:layout_height="match_parent" />
    
  5. 运行你的应用,并在模拟器或真实设备上查看 RN 组件。

总结

在本文中,我们详细介绍了如何搭建 RN 的开发环境、如何将 RN 集成到现有的原生应用中,以及如何将 RN 集成到 Android Fragment 中。我们还提供了一些有用的提示和技巧,帮助你顺利完成这些任务。通过掌握这些知识,你可以更好地利用 RN 的强大功能,构建出高质量的移动应用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/61149.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iOS 18 导航栏插入动画会导致背景短暂变白的解决

问题现象 在最新的 iOS 18 系统中,如果我们执行导航栏的插入动画,可能会造成导航栏背景短暂地变为白色: 如上图所示:我们分别向主视图和 Sheet 弹出视图的导航栏插入了消息,并应用了动画效果。可以看到,前者的导航栏背景会在消息插入那一霎那“变白”,而后者则没有任何…

GNU与开源:塑造数字世界的自由基石

引言 在信息技术的浩瀚星空中&#xff0c;GNU&#xff08;GNUs Not Unix&#xff09;项目犹如一颗璀璨的星辰&#xff0c;引领着开源运动的浪潮&#xff0c;深刻影响着全球软件开发的格局。自1983年由理查德斯托尔曼&#xff08;Richard Stallman&#xff09;创立以来&#xf…

【Swift】可选类型

文章目录 什么是可选类型&#xff1f;nilif 语句以及强制解析可选绑定隐式解析可选类型 什么是可选类型&#xff1f; Swift 的可选&#xff08;Optional&#xff09;类型&#xff0c;用于处理值缺失的情况。可选表示"那儿有一个值&#xff0c;并且它等于 x “或者"那…

SPP:空间金字塔池化

今天水一篇博客&#xff0c;讲讲SPP池化结构&#xff1b;那这是个什么东西呢&#xff1f;它的作用又是什么呢&#xff1f;在了解它之前我们先简单了解一下大部分的神经网络&#xff1b; 引入&#xff1a; 在大部分的神经网络中&#xff0c;都将神经网络分为Backbone主干网络、…

网络安全与防范

1.重要性 随着互联网的发达&#xff0c;各种WEB应用也变得越来越复杂&#xff0c;满足了用户的各种需求&#xff0c;但是随之而来的就是各种网络安全的问题。了解常见的前端攻击形式和保护我们的网站不受攻击是我们每个优秀fronter必备的技能。 2.分类 XSS攻击CSRF攻击网络劫…

Python从0到100(七十三):Python OpenCV-OpenCV实现手势虚拟拖拽

前言&#xff1a; 零基础学Python&#xff1a;Python从0到100最新最全教程。 想做这件事情很久了&#xff0c;这次我更新了自己所写过的所有博客&#xff0c;汇集成了Python从0到100&#xff0c;共一百节课&#xff0c;帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…

Spring Cloud Alibaba [Gateway]网关。

1 简介 网关作为流量的入口&#xff0c;常用功能包括路由转发、权限校验、限流控制等。而springcloudgateway 作为SpringCloud 官方推出的第二代网关框架&#xff0c;取代了Zuul网关。 1.1 SpringCloudGateway特点: &#xff08;1&#xff09;基于Spring5&#xff0c;支持响应…

是时候谈谈Go的测试了

本篇内容是根据2019年4月份#83 It’s time to talk about testing音频录制内容的整理与翻译 测试是一门艺术还是一门科学&#xff1f;我们应该测试什么以及何时测试&#xff1f;测试的意义何在&#xff1f;测试会不会太过分&#xff1f;我们将在这一充满测试的剧集中探讨所有这…

Spark RDD sortBy算子什么情况会触发shuffle

在 Spark 的 RDD 中&#xff0c;sortBy 是一个排序算子&#xff0c;虽然它在某些场景下可能看起来是分区内排序&#xff0c;但实际上在需要全局排序时会触发 Shuffle。这里我们分析其底层逻辑&#xff0c;结合源码和原理来解释为什么会有 Shuffle 的发生。 1. 为什么 sortBy 会…

ssm139选课排课系统的设计与开发+vue(论文+源码)_kaic

摘 要 互联网的普及&#xff0c;改变了人们正常的生活学习及消费习惯&#xff0c;而且也大大的节省了人们的时间&#xff0c;由于各种管理系统都再不断的增加&#xff0c;更方便了用户&#xff0c;也改良了很多的用户习惯。对于选课排课系统查询方面缺乏系统的管理方式&#x…

网络基础 - NAT 篇

一、全局 IP 地址(公网 IP 地址)和私有 IP 地址 RFC 1918 规定了用于组建局域网的私有 IP 地址&#xff1a; 10.0.0.0 ~ 10.255.255.255172.16.0.0 ~ 172.31.255.255192.168.0.0 ~ 192.168.255.255 包含在以上范围内的 IP 地址都属于私有 IP 地址&#xff0c;而在此之外的 I…

Rust 布尔类型

文章目录 1、基本用法2、实例 bool 代表一个值&#xff0c;它只能是 true 或 false。 如果将 bool 转换为整数&#xff0c;则 true 将为 1&#xff0c;false 将为 0. 1、基本用法 bool 实现了各种 traits&#xff0c;例如 BitAnd、BitOr、Not 等&#xff0c;允许我们使用 &…

Springboot3.3.5 启动流程之 tomcat启动流程介绍

在文章 Springboot3.3.5 启动流程&#xff08;源码分析&#xff09; 中讲到 应用上下文&#xff08;applicationContext&#xff09;刷新(refresh)时使用模板方法 onRefresh 创建了 Web Server. 本文将详细介绍 ServletWebServer — Embedded tomcat 的启动流程。 首先&…

NPOI 实现Excel模板导出

记录一下使用NPOI实现定制的Excel导出模板&#xff0c;已下实现需求及主要逻辑 所需Json数据 对应参数 List<PurQuoteExportDataCrInput> listData [{"ItemName": "电缆VV3*162*10","Spec": "电缆VV3*162*10","Uom":…

CSDN如何写出”爆款“文章

一、选题策划 关注热点与趋势 时常浏览技术领域的热门话题&#xff0c;比如通过关注各大科技资讯网站&#xff08;如 InfoQ、开源中国等&#xff09;、社交媒体上的技术大 V 动态、行业知名企业发布的技术博客等渠道&#xff0c;了解当下最受关注的编程语言更新、框架应用、新兴…

DAY113代码审计-PHPTP框架微P系统漏审项目等

一、环境安装 导入数据 Debug 版本信息收集 一、不安全写法的sql注入&#xff08;拼接写法绕过预编译机制&#xff09; 1、Good.php的不安全写法 2、查找可以参数 3、找路由关系 application/index/controller/Goods.php http://172.19.1.236:8833/index.php/index/goods/aj…

Flink1.19编译并Standalone模式本地运行

1.首先下载源码 2.本地运行 新建local_conf和local_lib文件夹&#xff0c;并且将编译后的文件放入对应的目录 2.1 启动前参数配置 2.1.2 StandaloneSessionClusterEntrypoint启动参数修改 2.1.3 TaskManagerRunner启动参数修改 和StandaloneSessionClusterEntrypoint一样修改…

Ascend C算子性能优化实用技巧05——API使用优化

Ascend C是CANN针对算子开发场景推出的编程语言&#xff0c;原生支持C和C标准规范&#xff0c;兼具开发效率和运行性能。使用Ascend C&#xff0c;开发者可以基于昇腾AI硬件&#xff0c;高效的实现自定义的创新算法。 目前已经有越来越多的开发者使用Ascend C&#xff0c;我们…

传奇996_23——杀怪掉落,自动捡取,捡取动画

一、杀怪掉落 前置&#xff1a; 添加地图地图刷怪怪物掉落&#xff08;术语叫爆率&#xff0c;掉落叫爆率&#xff0c;而且文档上叫爆率&#xff09; 刷怪步骤&#xff1a;在\MirServer\Mir200\Envir\MonItems文件夹中建立以怪物名字为文件名的txt文件写法案例&#xff1a; …

第二十四章 TCP 客户端 服务器通信 - 当前 TCP 设备

文章目录 第二十四章 TCP 客户端 服务器通信 - 当前 TCP 设备当前 TCP 设备TCP 设备的 USE 命令 第二十四章 TCP 客户端 服务器通信 - 当前 TCP 设备 当前 TCP 设备 可以使用 %SYSTEM.TCPDevice方法返回当前 TCP 设备的 IP 地址和端口号。可以使用 Help() 方法列出这些方法&a…