Question

我正在尝试在React Native中制作一个音乐播放器应用程序。我正在使用'react-native-get-music-files'获取手机中的音乐文件列表。一切正常，但没有显示音乐文件的图像。我在应用程序的“加载”按钮上单击加载音乐文件。我尝试通过使用file:///storage......jpg粘贴路径来加载存储在设备中的简单图像，但是该图像也没有加载。

依赖项

"dependencies": {
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-get-music-files": "^2.1.0",
    "react-native-permissions": "^2.0.8",
    "react-native-track-player": "^1.1.8"
  },

代码

import React from 'react';
import {
  StyleSheet,
  ScrollView,
  View,
  Text,
 Button,
 Image
} from 'react-native';
import TrackPlayer from 'react-native-track-player';
import MusicFiles from 'react-native-get-music-files';
import {request, PERMISSIONS} from 'react-native-permissions';
class App extends React.Component{
  state = {
    storagePermission:null,
    songs : null,
  }

  // this track is already in my laptop where I am building the app... just to test play
  track = {
  id: 'testing123',
  url: require('./maula.mp3'),
  title: 'Maula Mere Maula',
    artist: 'deadmau5',
    album: 'while(1<2)',
    genre: 'Progressive House, Electro House',
    date: '2014-05-20T07:00:00+00:00', 
 }

 // function to show music files on load button pressed.
 getSongs =() =>{
  let AllSongs;
  if(this.state.songs== null){
    return(
      <Text>Press Load Button to Load Songs.</Text>
    )
  }
  else{
    // here is the problem.... it does not show cover image 
    AllSongs = this.state.songs.map(
      (song)=>{
        return(
          <View key={song.title} style={{marginTop:5,borderRadius:2,borderColor:"black",borderWidth:2,padding:10}}>
          <Text>{song.title}</Text>
          <Text> {song.path} </Text>
        <Text>{song.album}</Text>
        <Text>{song.duration}</Text>
          <Image source={{uri:song.cover}} style={{width: 200, height: 200}}/> 
        </View>
        );
      }
    );
  }

    return AllSongs;
}
  componentDidMount = ()=>{
    // getting permission of storage
    request(PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE).then(result => {
      this.setState({
        storagePermission : result
      }), ()=>{
        console.log(this.state.storagePermission);
      };
    });
    // getting track player ready
    TrackPlayer.setupPlayer().then(() => {
      console.log("Player Setup Completed");
      TrackPlayer.add([this.track, ]).then(function() {
        console.log("Track Added");
    });
  });
  }

  render(){
  return (
    <View style={styles.main}>
      <Text>Music Player</Text>
      <View style={{flexDirection:"row", justifyContent:"space-between"}}>
      <Button title="Prev" onPress={
        ()=>{
          TrackPlayer.skipToPrevious();
        }
      } />
      <Button title="Load" onPress={
        ()=>{
        let Songs; 
        // loading all the music files presesnt in my phone
        MusicFiles.getAll({
          blured : true, 
          artist : true,
          duration : true, 
          cover : true, 
          genre : true,
          title : true,
          cover : true,
             }).then((tracks) => {
                Songs = tracks;
                console.log(Songs);
                this.setState({
                 songs : Songs
               })
             }).catch(error => {
             console.log(error)
        });
        }
      } />
      <Button title="Pause"  onPress={
        ()=>{
          TrackPlayer.pause();
        }
      } />
      <Button title="Play" onPress={
        ()=>{
          TrackPlayer.play();
        }
      } />
      <Button title="Stop" onPress={
        ()=>{
          TrackPlayer.stop();
        }
      } />
       <Button title="Next" onPress={
        ()=>{
          TrackPlayer.skipToNext();
        }
      } />
      </View>
      <ScrollView>
      {this.getSongs()}
      </ScrollView>

    </View>
  )
}
}

const styles = StyleSheet.create({
  main:{
    flex:1,
    margin:10,
    padding:10,

  }
})



export default App;

Answer 1

只需将“写入外部存储”权限添加到您的项目 AndroidManifest.xml 文件中，即可使用。

在 android / app / src / main / AndroidManifest.xml 中添加：

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

这是因为 react-native-get-music-files 包会保存音乐文件的封面，并且需要将其保存到手机本地存储的权限。

音乐文件封面图片未在React Native中显示

1 个答案: