我正在构建一个音乐播放器,所以我希望当用户关闭应用程序时,保存他正在听的歌曲的位置,为此我只需在 Track zone component
的 componentWillUnmount 中运行一个函数,这个:
componentDidMount() {
TrackPlayer.addEventListener("playback-track-changed", this.get_actual_track);
TrackPlayer.addEventListener("playback-queue-ended", this.get_queue_option);
this.init();
}
componentWillUnmount() {
this.save_position();
}
save_position = async() => {
status = await TrackPlayer.getState();
console.log(status);
if (status === 3 || status === 8 || status === 2) {
let position = await TrackPlayer.getPosition();
await AsyncStorage.setItem("last_song_duration", JSON.stringify(position));
await TrackPlayer.pause();
TrackPlayer.destroy();
}else {
return;
}
}
有时它会保存它,有时它会保存它,认为它与它有关,但不知道是什么,当我打开应用程序时,这是加载所有内容的第一个组件:
在应用程序中我有 Tab navigator
export default class App extends React.Component {
渲染(){
返回 (
<>
这是tab navigator
componentDidMount() {
TrackPlayer.addEventListener("playback-track-changed", this.play_selected_music);
this.requestPermission();
}
requestPermission = async () => {
try {
const permission = await PermissionsAndroid.requestMultiple(
[
PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
],
);
if (permission["android.permission.READ_EXTERNAL_STORAGE"] === PermissionsAndroid.RESULTS.GRANTED
&& permission["android.permission.WRITE_EXTERNAL_STORAGE"] === PermissionsAndroid.RESULTS.GRANTED) {
try {
let tracks = [];
let tracks_object = [];
tracks = await MusicFiles.getAll({
cover: true,
});
let length = tracks.length;
for (i = 0 ; i < length ; i++) {
tracks_object.push(new Tracks_info(tracks.results[i]));
}
this.setState({tracks: tracks_object}, () => this.init_player());
}catch(error) {
alert(error);
}
}else {
this.requestPermission();
}
}catch (error) {
alert(error)
}
};
init_player = async () => {
try {
if (this.random) {
let tracks = this.random_queue();
await TrackPlayer.setupPlayer();
await TrackPlayer.updateOptions({ stopWithApp: true });
await TrackPlayer.add(tracks);
this.setState({random_tracks: tracks, init: true});
}else {
let tracks = this.state.tracks;
await TrackPlayer.setupPlayer();
await TrackPlayer.updateOptions({stopWithApp: true});
await TrackPlayer.add(tracks);
this.setState({init: true});
}
}catch(error) {
alert(error);
}
}
它的渲染方法:
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name = "Tracks" children = {({navigation}) => <Tracks navigation = {navigation} tracks = {this.state.tracks}></Tracks>}></Tab.Screen>
<Tab.Screen name = "PlayList" children = {({navigation}) => <PlayList navigation = {navigation} tracks = {this.state.tracks}></PlayList>}></Tab.Screen>
</Tab.Navigator>
<BottomSheet
ref = {ref => (this.sheetref = ref)}
initialSnap = {1}
snapPoints = {[Dimensions.get("window").height - StatusBar.currentHeight, 95]}
renderHeader = {() => <Player_Header {...props}></Player_Header>}
renderContent = {() => <Track_Zone {...props}></Track_Zone>}
enabledContentGestureInteraction = {false}
onOpenEnd = {this.hide_icon}
onCloseEnd = {this.show_icon}>
</BottomSheet>
</NavigationContainer>