现在，React Native 是一种越来越流行的移动应用开发框架。一个强大的编程工具，它提供了很多有用的功能，使我们能够创建高质量的移动应用。然而，在使用 React Native 进行开发时，一个常见的问题是如何查看我们的代码是如何在移动设备上运行的。这时，一个名为 rnviewer 的 npm 包可以帮助我们快速解决这个问题。
什么是 rnviewer？
rnviewer 是一个用于实时预览 React Native 应用的 npm 包。它提供了一个监视器，可以将 React Native 应用实时显示在浏览器中，方便我们在开发过程中随时查看代码运行情况。与其他预览工具不同的是，rnviewer 无需任何额外的配置即可使用，只需在你的 React Native 应用中安装和引入它。
如何使用 rnviewer？
首先，在你的 React Native 应用中使用 npm 安装 rnviewer：
npm i --save-dev rnviewer
然后，将以下代码添加到你的 App.js 文件中：
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ - ----------- - ---- --------------- ------ --- ---- -------- ------ - ---- -- ------- - ---- ------------- ------ -------- ---- ----------- -------------------------------------- -- -- - -------------- ------ ---- ---
rnviewer 函数接收一个组件作为参数，并返回之前传递的组件，它会自动将组件呈现到监视器中。
现在，你可以启动你的 React Native 应用，使用以下命令将其运行在 iOS 或 Android 模拟器上：
react-native run-android
或者
react-native run-ios
当你运行应用时，在浏览器中访问 http://localhost:8081/rnviewer 进入 rnviewer 界面，你将看到你的 React Native 应用在实时预览中。
rnviewer 的高级用法示例
rnviewer 还提供了一些高级用法，可以帮助我们更好地调试和测试 React Native 应用。
导航测试
rnviewer 中包含了一个 Navigator 组件，可以帮助我们测试不同的屏幕路由。我们可以在一个虚拟设备中进行所有 UI 测试，而无需在实际设备上运行应用。
-- -------------------- ---- -------
------ - --------- - ---- -----------
------------------ ---------- -
-- ----------------- -
------ ------------------------------------ - --------- ---
-
-
-------- -
------ -
---------- --------------- ---------- ----------- -- ------------------------------ --
--
-Navigator 组件接收两个 props：initialRoute 和 renderScene。 initialRoute 表示你的应用的起始页面，renderScene 是一个回调函数，在每个场景/页面呈现时调用。
使用 Redux 测试
针对 Redux 项目，rnviewer 还提供了 Redux 状态监视器。这个插件可以帮助我们检查应用的状态并定位错误。
-- -------------------- ---- -------
------ - ------------ - ---- -----------
----- ----- - ---------------------
-------- -
------ -
--------- --------------
------------- --
---- --
-----------
--
-StoreMonitor 组件自动将你的 Redux store 和 actions 显示在 rnviewer 中。
结论
如你所见，rnviewer 是一个非常有用的 npm 包，它可以帮助我们实时监视 React Native 应用的运行情况。使用它，我们可以更好地跟踪应用程序的行为，并更快地进行调试和测试。我希望这篇文章能够为你提供关于如何使用和优化 rnviewer 的相关信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a530d0927023822499