[英]Passing function in React-Native audio player
我正在尝试根据名为 meditationList 的 function 动态播放声音。 function 的返回为我提供了它在播放器中工作的正确路径。
但是,如果我在 URL 上调用 function 不工作,则会出现以下错误:拒绝,无法找到变量 meditationList。 我还尝试使用 JSON.stringify 返回 adress.meditation.meditationPlayerAdress 但没有成功
export default class Player extends React.Component<Props> {
meditationList = () => {
const adress = this.props.route.params;
return adress.meditation.meditationPlayerAdress; //console.log returns ../../assets/track1.mp3
};
audio = () => {
TrackPlayer.setupPlayer().then(async () => {
// Adds a track to the queue
await TrackPlayer.add({
id: 'trackId',
url: require('../../assets/track1.mp3'), // this.require(meditationList())- warning that variable meditationList cannot be found
title: 'Track Title',
artist: 'Track Artist',
});
let trackId = await TrackPlayer.getCurrentTrack();
// Starts playing it
TrackPlayer.play();
});
};
pause = () => {
TrackPlayer.pause();
};
stop = () => {
TrackPlayer.stop();
};
render() {
return (
<SafeAreaView style={styles.container}>
<View style={{alignItems: 'center'}}>
<View style={{alignItems: 'center', marginTop: 24}}>
<Text style={[styles.textLight, {fontSize: 12}]} />
<Text
style={[
styles.text,
{fontSize: 15, fontWeight: '500', marginTop: 8},
]}>
{this.meditationList()}
</Text>
</View>
<View style={styles.coverContainer}>
<Image
source={require('../../../assets/coverArt.jpg')}
style={styles.cover}
/>
</View>
<View style={{alignItems: 'center', marginTop: 32}}>
<Text style={[styles.textDark, {fontSize: 20, fontWeight: '500'}]}>
Exhale
</Text>
<Text style={[styles.text, {fontSize: 16, marginTop: 8}]}>sal</Text>
</View>
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginTop: 16,
}}>
<TouchableOpacity onPress={this.stop}>
<FontAwesomeIcon icon={faStop} size={32} color="#93A8B3" />
</TouchableOpacity>
<TouchableOpacity
style={styles.playButtonContainer}
onPress={this.audio}>
<FontAwesomeIcon
name="play"
icon={faPlay}
size={32}
color="#3D425C"
/>
</TouchableOpacity>
<TouchableOpacity onPress={this.pause}>
<FontAwesomeIcon icon={faPause} size={32} color="#93A8B3" />
</TouchableOpacity>
</View>
</SafeAreaView>
);
}
}
meditationList cannot be found 解决方法:
当您使用class based component
时,其中定义的任何内容都可以通过this.ANYTHING_DEFINED
访问,但不能直接访问,所以这里我们需要this.meditationList()
您可以在function based component
中使用meditationList()
而不会出错。
require(var) 不会采用动态变量
您不能在 require 中使用变量。 所有要求都必须是静态可分析的。 这意味着您总是必须编写 require('/path/to/file')。资源
但是,你可以这样做, SOURCE
const IMAGES = {
image1: require('../image1'), // statically analyzed
image2: require('../image2'), // statically analyzed
}
getImage(num: number) { // dynamically invoked
return IMAGES['image' + num];
}
对于遇到这个问题的每个人。 我找不到一个简单的解决方案,但我找到了一个非常方便的解决方案。
考虑到应用程序将所有音频文件存储在本地存储中是不好的(尤其是在大型应用程序的情况下),我决定将我的 URL 的路径设置为音频链接,从而解决“必需”的问题
现在我的代码看起来像这样并且可以完美运行
meditationList = () => {
const adress = this.props.route.params;
return adress.meditation.meditationPlayerAdress; //returns a URL link now
};
audio = () => {
TrackPlayer.setupPlayer().then(async () => {
// Adds a track to the queue
await TrackPlayer.add({
id: 'trackId',
url: this.meditationList(),
title: 'Track Title',
artist: 'Track Artist',
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.