react-native - 如何在反应原生轨道播放器中完成音频时更改播放图标
问题描述
我正在使用 react-native-track-player。我的问题是,当我的音频完成时,我的恢复图标不会自动变为播放图标。有人请看我的代码并帮助我。
嗨,我正在使用 react-native-track-player。我的问题是,当我的音频完成时,我的恢复图标不会自动变为播放图标。有人请看我的代码并帮助我。
<Button
onPress={() => this.playOrpause()}
style={{
backgroundColor: 'white',
borderRadius: 30,
borderWidth: 2,
borderColor: '#1191cf',
height: 60,
width: 60,
bottom: 5,
}}>
{this.state.AudioStatus || !this.playing ? (
<Icon
name="ios-play"
style={{ color: '#1191cf', fontSize: 32, left: 6 }}
/>
) : (
<Icon
name="md-pause"
style={{ color: '#1191cf', fontSize: 24, left: 6 }}
/>
)}
</Button>
playOrpause = async () => {
//this.setState({AudioStatus: !this.state.AudioStatus});
const currentTrack = await TrackPlayer.getCurrentTrack();
if (currentTrack == null || !this.playing) {
TrackPlayer.reset();
this.setPlayer(
this.props.audio,
this.props.title,
this.props.speaker,
this.props.speaker_image,
);
TrackPlayer.play();
} else {
console.log(await TrackPlayer.getState());
if ((await TrackPlayer.getState()) === 2 || (await TrackPlayer.getState()) === 0 || (await TrackPlayer.getState()) === 1 || (await TrackPlayer.getState()) === 'paused' || (await TrackPlayer.getState()) === 'ready' || (await TrackPlayer.getState()) === 'idle') {
TrackPlayer.play();
} else {
TrackPlayer.pause();
}
}
this.UpdateTrackUI();
};
解决方案
以前没有使用react-native-track-player
过,但是通过观察您的代码,您的图标基于this.state.AudioStatus || !this.playing
由于this.playing
不是 a state/prop
,因此更改 的值this.playing
不会导致重新渲染,因此您的按钮不会更改。如果您在迁移this.playing
到的其他部分没有任何问题,则this.state.playing
应该可以工作:)。
推荐阅读
- mysql - MySQL - 获取期间下达第 25 个订单的用户
- c++ - Obj::* 是什么意思?
- c# - WPF:Datagrid 不显示数据
- java - 从 Spring Boot 运行时的 AWSLambdaException 和 InvalidSignatureException
- google-cloud-data-fusion - 如何在数据融合中将架构文件作为宏传递给 BigQuery 接收器
- c - 读取指针
- ios - 快速展开模式
- javascript - 在 Cypress.io 中监控网站的控制台输出
- python - Python - 附加反斜杠添加到文件路径
- javascript - 三 JS:缩放以使对象适合中心点