react-native - 使用 React Native 在手机上搜索音频文件

Question

我正在使用 native react 来开发音乐应用程序，但我一直在努力找出搜索和播放已保存在客户端手机上的音频文件的最佳方法。我只是不确定解决这个问题的最佳模块/库是什么，或者 iOS/Android 操作系统是否允许这种类型的用户文件访问。

我正在使用 react-native-sound播放音频文件，我找到了react-native-fs模块，这看起来接近我觉得我需要搜索音频文件。有一个 readDir 函数，但你将它传递给它的目录路径常量，如 MainBundlePath、CachesDirectoryPath、DocumentDirectoryPath 等:

// require the module
var RNFS = require('react-native-fs');

// get a list of files and directories in the main bundle
RNFS.readDir(RNFS.MainBundlePath)

和:
1. MainBundlePath - 主包目录的绝对路径
2. CachesDirectoryPath - 缓存目录的绝对路径
3. DocumentDirectoryPath - 文档目录的绝对路径

这些目录中的任何一个都会是我查找已存储在客户端电话上的音频文件的地方吗？

Answer 1

这是一个 3 步过程 这需要存储权限(因为您要从本地存储中获取数据)

安装 react-native-permissions获取用户的存储权限，然后转到您的 AndroidManifest.xml 位于 YourProject/android/app/src/main/并添加以下内容:

 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

在请求歌曲之前创建函数来请求和检查存储权限，例如:

    componentDidMount() {
      Permissions.request('storage').then(response => {
        this.setState({ photoPermission: response })
      })
     }

然后创建另一个函数来从设备中获取数据(您也可以在函数中传递一些参数或过滤器——按照 react-native-get-music-files 文档)

  _getSongs =() =>{
       Alert.alert('seen')
       MusicFiles.getAll({

            }).then(tracks => {
              console.log(tracks)
            }).catch(error => {
            console.log(error)
       })
     }

所以，这是最终代码的样子

import React, { Component } from 'react';
import { StyleSheet, Text, View,Alert} from 'react-native';
import MusicFiles from 'react-native-get-music-files';
import Permissions from 'react-native-permissions';

export default class App extends Component {
    state = {
       storagePermission:''
     }

    componentDidMount() {
      Permissions.request('storage').then(response => {
            this.setState({ storagePermission: response })
      })
     }


    _getSongs =() =>{
       Alert.alert('seen')
       MusicFiles.getAll({

            }).then(tracks => {
              console.log(tracks)
            }).catch(error => {
            console.log(error)
       })
     }


    render() {
        return (
            <View style={{flex:1,justifyContent:'center', alignItems:'center'}}>
                <Text onPress={this._getSongs}>get songs</Text>
            </View>
        );
    }
}

然后你会得到一个用户歌曲列表的 JSON 数组，如下所示:

[
  {
    id : 1,
    title : "La danza del fuego",
    author : "Mago de Oz",
    album : "Finisterra",
    genre : "Folk",
    duration : 132132312321, // miliseconds
    cover : "file:///sdcard/0/123.png",
    blur : "file:///sdcard/0/123.png",
    path : "/sdcard/0/la-danza-del-fuego.mp3"
  }
]

祝你好运!