React Native 音频录制例子来解惑入门
React Native 音频录制例子来解惑入门
前言
这段时间都掉到React Native的坑,踩了不少坑,基本也是别人踩过的坑,既然是别人踩过的坑,那么一般情况下都能找到解决方案,所以前期该踩的一些低级坑都踩了,不过这也让笔者对RN有了新的认识,那就是RN有入门门槛,在新项目考虑用它的时候要慎重。 既然要快速掌握RN,那就先从实际需求出发了,我们要用它来做些什么事情,笔者这里有以下需求:
在这段时间实践来看,RN是能够满足我的需求的,今天就通过一个例子来认识下RN是如何进行开发的。 React Native工程目录结构首先我们分析下RN的目录结构是怎样的,以我创建的工程为例,如下图:
目录结构解析:
以上,没有接触过的同学可能比较蒙,具体如何搭建React Native开发环境参考:http://reactnative.cn/docs/0.46/getting-started.html#content 从index.android.js开始讲起关于开发环境的搭建,笔者这里不多说,这个是每个要入门RN的同学都要跨过的一道坎,没有这一步后面的开发调试都是坑,你会发现非常得痛苦。
'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导包是类似,导入工程中需要用到的组件,比如 import AudioExample from './js/AudioExample'
然后,我们需要将这个组件注册到我们的App中,那么就有了这一句: AppRegistry.registerComponent('android',()=> AudioExample);
ok,这样我们就完成了组件注册的操作,以后我们打开RN界面就是以index.android.js注册的组件为入口的。 说说怎么用开源项目提供的组件我们先看下集成后的效果图: 这个开源组件实现了,录制音频,对音频进行播放、停止、暂停等操作。 看下我的原生工程: 引入了两个library,这两个library都是通过npm install更新下来的,我们看下 {
"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命令就能更新下来,具体在
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中: 这样就完整的将开源组件引入到我们工程中了。 如何测试?
打包命令 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代码没弄好,需要仔细检查下,打包是影响你最终运行程序的最后一步。 打包成功之后,运行 最后,直接在Android Studio像正常运行你的程序一样执行run,最后就可以看到效果了。 总结这段时间入门实践React Natvie最大的感受就是坑多,这个需要比较多耐心去查资料和思考,笔者为了搞定这个都有点上火了,基本后面的障碍就不会是这些边缘性问题,另外RN实时性调试还是蛮爽的,修改js重新加载就能够实时看到效果,对后面调试有很大的帮助。前面说了,RN是有一定的学习门槛的,需要掌握js,一些css、html的基础,在做技术选型的时候应该考虑下你的项目是否适合完全用RN来做,或者一部分用RN来做。大概就这么多,感谢您的阅读。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |