React Native 音频录制例子来解惑入门

以你之姓@ 2022-06-11 23:14 198阅读 0赞

# React Native 音频录制例子来解惑入门 #

*  React Native 音频录制例子来解惑入门
    
     *  前言
     *  React Native工程目录结构
     *  从indexandroidjs开始讲起
     *  说说怎么用开源项目提供的组件
     *  如何测试
     *  总结

## 前言 ##

> 本文基于开源Demo：[https://github.com/zmxv/react-native-sound][https_github.com_zmxv_react-native-sound]，通过这个例子学习怎么开发React Native App.

这段时间都掉到React Native的坑，踩了不少坑，基本也是别人踩过的坑，既然是别人踩过的坑，那么一般情况下都能找到解决方案，所以前期该踩的一些低级坑都踩了，不过这也让笔者对RN有了新的认识，那就是RN有入门门槛，在新项目考虑用它的时候要慎重。

既然要快速掌握RN，那就先从实际需求出发了，我们要用它来做些什么事情，笔者这里有以下需求：

>  *  Android和iOS能够用同一套模板页面，不需要各自开发
>  *  能够动态更新，类似热更新的能力
>  *  能够使用原生组件实现一些能力，比如音频采集和播放

在这段时间实践来看，RN是能够满足我的需求的，今天就通过一个例子来认识下RN是如何进行开发的。

## React Native工程目录结构 ##

首先我们分析下RN的目录结构是怎样的，以我创建的工程为例，如下图：

![这里写图片描述][SouthEast]

> 注：这个是Visual Studio Code，非常好用，用来开发RN也是蛮适合的，推荐一下。

目录结构解析：

*  android （原生Android工程，AS）
 *  img（这是我自己创建的，放图片）
 *  js（这是我自己创建，js源代码）
 *  node\_modules（RN依赖的所有模块，需要通过npm去安装）
 *  .flowconfig（配置文件，这个文件用于约束js代码的写法，非必须）
 *  index.android.js（RN Android的入口，这里注册开发的组件）
 *  package.json（RN的全局配置文件，npm init的时候会提示填入内容）

以上，没有接触过的同学可能比较蒙，具体如何搭建React Native开发环境参考：[http://reactnative.cn/docs/0.46/getting-started.html\#content][http_reactnative.cn_docs_0.46_getting-started.html_content]

## 从index.android.js开始讲起 ##

关于开发环境的搭建，笔者这里不多说，这个是每个要入门RN的同学都要跨过的一道坎，没有这一步后面的开发调试都是坑，你会发现非常得痛苦。

`index.android.js` 是Android的入口，我们看下它做了哪些动作：

'use strict';
    
    import React from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View
    } from 'react-native';
    
    import AudioExample from './js/AudioExample'
    
    class HelloWorld extends React.Component { 
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.hello}>Hello, bugly</Text>
          </View>
        )
      }
    }
    var styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
      },
      hello: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
    });
    
    AppRegistry.registerComponent('android', ()=> AudioExample);

稍微解析下，最前面有import的动作，跟java导包是类似，导入工程中需要用到的组件，比如`AppRegistry`，如果是导入自己开发的组件，也是通过import来到导入：

import AudioExample from './js/AudioExample'

> 导入当前目录下的js目录下的AudioExample.js文件.

然后，我们需要将这个组件注册到我们的App中，那么就有了这一句：

AppRegistry.registerComponent('android', ()=> AudioExample);

ok，这样我们就完成了组件注册的操作，以后我们打开RN界面就是以index.android.js注册的组件为入口的。

## 说说怎么用开源项目提供的组件 ##

我们先看下集成后的效果图：

![这里写图片描述][SouthEast 1]

这个开源组件实现了，录制音频，对音频进行播放、停止、暂停等操作。

看下我的原生工程：

![这里写图片描述][SouthEast 2]

引入了两个library，这两个library都是通过npm install更新下来的，我们看下`package.json`这个文件的配置：

{
      "name": "reactnativedemoforandroid",
      "version": "1.0.0",
      "description": "react native demo for android",
      "main": "index.android.js",
      "scripts": { "test": "jtest", "start": "node node_modules/react-native/local-cli/cli.js start" },
      "repository": { "type": "git", "url": "http://git.code.oa.com/wenjiewu/ReactNativeDemoForAndroid.git" },
      "keywords": [ "android" ],
      "author": "wenjiewu",
      "license": "ISC",
      "dependencies": { "react": "16.0.0-alpha.6", "react-native": "0.44.2", "react-native-audio": "^3.2.2", "react-native-sound": "^0.8.3" } }

可以看到在依赖里面就引入了具体的组件，我们通过npm命令就能更新下来，具体在`node_modules`可以看到，down下来之后，我们需要引入到Android工程中：

`android/seetings.gradle`配置

include ':app'
    
    include ':react-native-sound'
    project(':react-native-sound').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sound/android')
    include ':react-native-audio'
    project(':react-native-audio').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-audio/android')

然后在app工程中的build.gradle进行依赖：

![这里写图片描述][SouthEast 3]

这样就大功告成了？ no，还有一步：

需要我们在Application类中添加具体的package到list中：

![这里写图片描述][SouthEast 4]

这样就完整的将开源组件引入到我们工程中了。

## 如何测试？ ##

> 如果要在Android原生工程中去运行RN页面，你需要打一个离线的js包

![这里写图片描述][SouthEast 5]

**打包命令**

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

> 具体路径根据你的工程来配.

打包成功的效果如下：

![这里写图片描述][SouthEast 6]

如果你打包的时候就已经报错，说明你的一些依赖环境或者js代码没弄好，需要仔细检查下，打包是影响你最终运行程序的最后一步。

打包成功之后，运行`npm start`，启动开发服务器（Packager）：

![这里写图片描述][SouthEast 7]

最后，直接在Android Studio像正常运行你的程序一样执行run，最后就可以看到效果了。

## 总结 ##

这段时间入门实践React Natvie最大的感受就是坑多，这个需要比较多耐心去查资料和思考，笔者为了搞定这个都有点上火了，基本后面的障碍就不会是这些边缘性问题，另外RN实时性调试还是蛮爽的，修改js重新加载就能够实时看到效果，对后面调试有很大的帮助。前面说了，RN是有一定的学习门槛的，需要掌握js，一些css、html的基础，在做技术选型的时候应该考虑下你的项目是否适合完全用RN来做，或者一部分用RN来做。大概就这么多，感谢您的阅读。

[https_github.com_zmxv_react-native-sound]: https://github.com/zmxv/react-native-sound
[SouthEast]: /images/20220612/bb6310e86c5842338b526307af83b4eb.png
[http_reactnative.cn_docs_0.46_getting-started.html_content]: http://reactnative.cn/docs/0.46/getting-started.html#content
[SouthEast 1]: /images/20220612/b6ab6288348f456b9e12963f7594b768.png
[SouthEast 2]: /images/20220612/607f558b416b4470ac26f1dc12e95786.png
[SouthEast 3]: /images/20220612/a3b4203b5ea14fcaa5355591afbe15dc.png
[SouthEast 4]: /images/20220612/264134726c114bb49b9bfa692458aa71.png
[SouthEast 5]: /images/20220612/259f01eb81d4424583eb0b2cddceeb57.png
[SouthEast 6]: /images/20220612/95cd750877274575bc497abcf507fc9c.png
[SouthEast 7]: /images/20220612/544835b6908c4e6ba2eb1837ea51203f.png