在前端开发中，经常需要在移动端进行测试和调试，而在 React Native 开发中则需要经常进行实时预览，这时候我们就需要使用到 【rn-live】 这个 npm 包了。
rn-live 是什么？
rn-live 是一个基于 react-native 开发并发布到 npm 上的 npm 包，可以通过实时预览的方式提供开发者一种更加高效的开发体验，支持在安卓和 IOS 设备上使用。
如何使用 rn-live？
接下来我们将介绍如何使用 rn-live 进行实时预览。
安装 rn-live
首先需要安装 rn-live，可以在命令行中输入以下命令：
npm install rn-live --save-dev
在安装完成之后，需要为 rn-live 配置一个脚本命令，可在 package.json 中添加以下代码：
"scripts": {
"live": "rn-live"
}配置 Android 平台
修改 AndroidManifest.xml
在 AndroidManifest.xml 中添加以下代码：
<uses-permission android:name="android.permission.INTERNET"/>
启用调试模式
在项目根目录新建 rn-cli.config.js 文件并添加以下代码：
module.exports = {
transformer: {
assetPlugins: ['react-native-debug-sourcemap'],
},
};配置 IOS 平台
安装 FlipperKit
在项目根目录输入以下命令：
pod install
实现 Debug 组件
在项目的 AppDelegate.m 中添加以下代码：
-- -------------------- ---- -------
------- ----------------------------
------- -------------------
------- -------------------------------------------------
---- -------------------------- --------- -------- -
------ ---- --------- - ---
-- ------------ -
--------- - ----
--------------- ------------- ---------------------------------- ------ ---------------------------------------------------------------------
--------------- ------------- -------
-
-
- -------------------------------- ------------- ------------------------------------------- --------------- -
-
------ ----
-启动实时预览
在命令行中输入以下命令：
npm run live
在启动完之后，会自动弹出一个二维码，使用手机扫描后即可在手机上进行预览。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
----- --- - -- -- -
------ -
----- -------- ----- -- ----------- --------- --------------- -------- ---
------------ -------------
-------
--
--
------ ------- ----总结
通过 rn-live 这个 npm 包，我们可以在移动设备上快速进行应用程序的测试和调试，提高开发效率。本文详细介绍了 rn-live 的使用方法，并给出了示例代码，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b281e8991b448e2f7d