2018年5月更新
现在，我了解了更多有关使用React Native和创建更友好的NPM软件包的信息，我对本文详细介绍的软件包进行了一些重大更新。
该程序包现在称为react-audio-player-recorder-no-linking 。 我选择这个新名称是为了强调它包括单独的Recorder和Player组件，而不仅仅是一个SoundRecorder组件，并且该包不需要链接到本机代码。 缺少链接可保持包装在Expo上使用的安全性。
- 人体编排101
- 播客直播
- 音频档案：Toni Fontana al WIAD Palermo
- 我如何使用浏览器的Web Audio API和D3显示我的麦克风提要的均衡器
- 音频上的Granblue Fantasy
此外，所有UI（按钮，标志等）均已从实际的Player和Recorder组件中拉出，并且可以作为导入使用。 导入的UI项可以作为props提供给Player和Recorder 。 更重要的是，用户可以提供自己的UI项目作为道具。 这意味着用户可以按他们想要的任何方式为组件设置主题。
最后，GitHub存储库已更改以反映新名称。 现在可以在https://github.com/reggie3/react-native-audio-player-recorder-no-linking中找到该软件包。
所有这些更改导致灵活性和功能性大大改善。 但是，这也意味着文章中提到的组件以及为组件提供的相关道具已经发生了重大变化。 这些更改应包含在上述GitHub存储库中的readme.md文件中。
介绍
我已经辛苦工作了几个月的项目终于达到了我准备加入另一项功能的地步。 是时候让我的创作录制和播放声音了。
我的项目是使用expo.io构建的，它们提供了其音频API的文档以及Github存储库，其中包含可以使用expo应用程序运行的示例项目。 有了如此良好的基础，我努力而有条理地开始将示例中的代码包含到我自己的项目中。
这种方法是成功的，但我开始意识到，我以牺牲灵活性和可测试性为代价，向现有项目添加了大部分独立功能。 灵活性会受到影响，因为如果我想向新项目添加相同的功能，则必须重复该过程。 可测试性会变差，因为我已经通过将其连接到我的redux商店并实现了突然出现的其他好主意，以一种非功能性的方式集成了此功能。
因此，为什么不将这项功能作为NPM软件包使用呢？它将需要一些输入，并向我提供所需的音频剪辑信息？ 这将提供我想要的可测试性，给我带来大量的可重用性，并通过最大程度地减少连接到最终产品的输入和输出点的数量来扩大我的工作范围。
设计
首先，我确定我真正需要的只是一个屏幕（或页面，或您喜欢的任何其他隐喻），用户可以在该屏幕上按下按钮以开始录制声音，按下按钮以停止录制声音，然后播放，暂停，停下来，然后重播声音。
该UI将与expo.io文档中提供的示例代码进行交互，以实际执行记录和回放。
另外，如果用户不满意，UI还需要按钮来重置音频剪辑，并且在用户完成任务时需要按钮来执行某些操作。 这可以和返回上一页一样简单。 这导致了最终需求； 包应返回一些内容，以使调用组件可以获取有关完整声音片段的信息。 由于博览会文档显示成功记录会导致文件保存到设备，因此我的目标是通过回调函数将相关文件信息传递回调用父组件。
实作
从这些期望的目标开始，我开始创建NPM软件包的基础。 得益于我对react-native-webview-braintree和react-native-webview-quilljs项目的先前经验，我开发了以下过程来创建一个项目，以准备将其转换为NPM包。
首先，我在Expo中创建了一个空白项目。 这将导致一个正常工作的应用程序以及一个App.js文件，其中包含一个名为App的本机组件，以充当要发布的组件的“框架”。 App组件呈现SoundRecorder组件，该组件将成为已发布的产品。 使用此技术的一个好处是，我将从中获得一个可以正常运行的应用程序，可以通过expo客户端轻松共享该应用程序。
这样， App组件还将相关的道具传递给SoundRecorder组件。
结论
总的来说，我喜欢将整体功能分离到单独的NPM包中的想法。 它支持关注点和可测试性的分离。 它也帮助我一次只吃一口大象。
它还提供了为用户社区做出贡献并从中获得意见的机会，从而有可能创造出更好的产品。
该项目的最终结果托管在GitHub上的react-native-sound-recorder-no-native仓库中，该仓库还包含NPM安装和使用说明。
如果您在Android或iOS设备上安装了expo.io客户端，则可以扫描以下QR码以运行此应用程序：
此组件已在Android和iPhone上成功测试。
