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

前言

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

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

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

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

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

React Native工程目录结构

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

注:这个是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

从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注册的组件为入口的。

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

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

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

看下我的原生工程:

引入了两个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进行依赖:

这样就大功告成了? no,还有一步:

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

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

如何测试?

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

打包命令

 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/

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

打包成功的效果如下:

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

打包成功之后,运行npm start,启动开发服务器(Packager):

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

总结

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

原文发布于微信公众号 - 小巫技术博客(wwjblog)

原文发表时间:2017-07-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏smy

ckplayer 如何在PC上完美支持 m3u8播放

使用过ckplayer的同学都知道,相对jwplayer等,它非常的容易配置和使用。功能也是基本满足我们的需求的。 一般情况我们都使用普通的视频格式比如mp4,...

5516
来自专栏腾讯移动品质中心TMQ的专栏

【腾讯 TMQ】零基础学习 Fiddler 抓包改包

Fiddler 是一款 HTTP 协议调试代理工具,它能够抓取记录本机所有 HTTP(S) 请求,通过设置断点等方法我们可以任意修改进出 Fiddler 的数据...

1.6K0
来自专栏NetCore

微信快速开发框架(九)-- V3.0发布,代码已更新至Github 新增微店功能

版本内容 1、修正了缺少对Event.View的支持 2、增加了用户UnionID 3、新增微信小店功能 4、多客服功能 5、单元测试 什么是UnionID 我...

3688
来自专栏猛牛哥的博客

解决新版wordpress打开速度超级慢的问题

3663
来自专栏地方网络工作室的专栏

打造前端MAC工作站(四)配置 Atom 编辑器

打造前端MAC工作站(四)配置 Atom 编辑器 前言 前端工程师可选择的编辑器主要有 Atom、Sublime Text3、VS Code,三者风格差不多,你...

3276
来自专栏Python数据科学

如何进行手机APP的数据爬取?

平时我们的爬虫多是针对网页的,但是随着手机端APP应用数量的增多,相应的爬取需求也就越来越多,因此手机端APP的数据爬取对于一名爬虫工程师来说是一项必备的技能。...

1732
来自专栏蘑菇先生的技术笔记

Windows10自适应和交互式toast通知[1]

创建灵活的toast通知,包括内嵌图片及更多的内容,不在局限于之前Windows 8.1和Windows Phone 8.1提供的toast模板。

1236
来自专栏程序你好

三分钟让你了解什么是Web开发?

753
来自专栏前端儿

安卓微信页面的调试

在开发安卓微信页面时,刚开始一般是会在PC上进行,等到开发后期的自测阶段再转到安卓模拟器上、转到各种真机上自测,上线了如果出问题还需要在真机上调试测试。

6072
来自专栏前端知识分享

Bootstrap中datetimepicker日期控件1899年问题解决

  最近在开发项目的过程中,遇到一个很尴尬的问题。我们项目一直采用的是angular+bootstrap,日期控件用的是bootstrap中的datetimep...

1694

扫码关注云+社区