使用React Native

Question

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

我正在使用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

这是一个三步过程，需要存储权限（因为您正在从本地存储中获取数据）

1. 安装react-native-permissions以获得用户的存储权限，然后转到位于 YourProject / android / app / src / main / <的 AndroidManifest.xml / strong>，然后添加以下内容：

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

2. 创建功能以在请求歌曲之前请求并检查存储权限，例如：

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

1. 然后创建另一个函数以从设备获取数据（您也可以在函数中传递一些参数或过滤器-遵循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"
  }
]

祝你好运！

Answer 2

react-native-get-music-files是一个npm包，用于搜索本地存储和SD卡上的所有音乐文件。

<form id="myForm" method="POST" action="addtodatabase.php" >
      <!-- Your inputs -->
</form>

<input type="submit" value="Submit" form="myForm" />

该函数返回一个对象数组，您可以像这样循环：

import MusicFiles from 'react-native-get-music-files';

MusicFiles.get(
  (success) => {
     //this.saveSongData(success)
  },
  (error) => {
       console.log(error)
  }
);

不幸的是，它目前只支持Android。