[英]React native slider not updating progress on state update
我正在使用 react native 版本0.61.5和 react 版本16.8.3以及 react native 有天赋的聊天版本0.9.11来构建一个小型聊天应用程序。 我想发送音频消息。 所以我使用react-native-audio-recorder-player库来录制音频并播放。 到目前为止,录音和播放是成功的。 现在我想在用户播放音频时播放音轨进度。 我使用react-native-community/react-native-slider来显示搜索栏。 这就是音频消息的样子
当用户按下播放按钮时,我想在此 slider 上显示音轨进度。 到目前为止,我就是这样做的。
天才聊天组件
render() {
return (
<GiftedChat
messages={this.state.messages}
onSend={messages => this.onSend(messages)}
scrollToBottom={true}
renderUsernameOnMessage={true}
renderComposer={this.renderComposer}
renderBubble={this.renderBubble}
user={{
_id: 1,
name:'You'
}}
/>
)
}
渲染气泡组件
renderBubble = (props) => {
return(
<View>
<View style={{display:'flex',flexDirection:'row'}}>
<Button iconLeft transparent onPress={this.onStartPlay}>
<Icon name='ios-play' />
</Button>
<Slider
style={{width: 150, height: 40}}
minimumValue={0.0000}
maximumValue={1.0000}
value={this.state.audioProgress}
minimumTrackTintColor="#FFFFFF"
maximumTrackTintColor="#000000"
/>
</View>
<Bubble {...props}/>
</View>
)
}
onStartPlay function
onStartPlay = async () => {
console.log('onStartPlay');
const msg = await audioRecorderPlayer.startPlayer('sdcard/test_recording.aac');
console.log(msg);
audioRecorderPlayer.addPlayBackListener((e) => {
if (e.current_position === e.duration) {
console.log('finished');
audioRecorderPlayer.stopPlayer();
}
this.setState({
currentPositionSec: e.current_position,
currentDurationSec: e.duration,
playTime: audioRecorderPlayer.mmssss(Math.floor(e.current_position)),
duration: audioRecorderPlayer.mmssss(Math.floor(e.duration)),
});
let currentProgress = Math.max(0, e.current_position) / e.duration;
console.log('currentProgress',parseFloat(currentProgress).toFixed(4));
this.setState({ audioProgress: parseFloat(currentProgress).toFixed(4) });
});
};
我可以在控制台中看到当前进度在audioProgress
state 中得到更新。 我正在通过audioProgress
设置Slider
的值,但搜索栏的 position 没有得到更新。 我在 Nexus android 模拟器上对此进行测试。
我相信您需要将 onValueChange 添加到 Slider。 尝试添加:
<Slider
style={{width: 150, height: 40}}
minimumValue={0.0000}
maximumValue={1.0000}
value={this.state.audioProgress}
onValueChange = {this.state.audioProgress.bind(this)} <===
minimumTrackTintColor="#FFFFFF"
maximumTrackTintColor="#000000"
/>
或者
<Slider
style={{width: 150, height: 40}}
minimumValue={0.0000}
maximumValue={1.0000}
value={this.state.audioProgress}
onValueChange = {this.state.audioProgress} <===
minimumTrackTintColor="#FFFFFF"
maximumTrackTintColor="#000000"
/>
让我知道它是否有效!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.