如何解决如何添加 react native expo Av 搜索栏
我正在使用 expo av 包在 react native expo cli 中构建音乐应用程序 我已经建立了基本的功能,比如播放和暂停。 现在我想实现搜索栏,但我不确定我该怎么做?
请看一下这段代码,请告诉我如何实现搜索栏
const Controller = () => {
const [sound,setSound] = useState();
const [isPlaying,setisPlaying] = useState();
const [currentIndex,setCurrentIndex] = useState(0);
async function playSound() {
console.log("Loading Sound");
const source = { uri: audioBookPlaylist[currentIndex].uri };
const { sound } = await Audio.Sound.createAsync(
source,onPlaybackStatusUpdate
);
setSound(sound);
setisPlaying(true);
sound.playAsync();
console.log("song loaded");
}
useEffect(() => {
playSound();
console.log(currentIndex);
},[]);
const Playpause = async () => {
isPlaying ? await sound.pauseAsync() : await sound.playAsync();
setisPlaying(!isPlaying);
onPlaybackStatusUpdate();
// console.log(status);
};
const handleNextTrack = async () => {
if (sound) {
await sound.unloadAsync(setisPlaying(!isPlaying));
setCurrentIndex(
currentIndex + 1 > audioBookPlaylist.length - 1 ? 0 : currentIndex + 1
);
await playSound();
}
elseif;
console.log(currentIndex);
};
const handlePreviousTrack = async () => {
if (sound) {
await sound.unloadAsync(setisPlaying(false));
setCurrentIndex(
currentIndex === 0 ? audioBookPlaylist.length - 1 : currentIndex - 1
);
await playSound();
}
console.log(currentIndex);
sound ? await sound.playAsync() : null;
};
这是视图
return (
<View style={style.container}>
<View style={style.titlecontainer}>
<Text style={style.title}>The Grid: Dat Punk</Text>
<TouchableOpacity>
<CsIcons name="Like" size={30} color="white" />
</TouchableOpacity>
</View>
<Slider
style={{ width: 200,height: 40 }}
minimumValue={0}
maximumValue={1}
minimumTrackTintColor="#FFFFFF"
maximumTrackTintColor="#000000"
/>
<View style={style.controllers}>
<TouchableOpacity>
<CsIcons name="Shuffle" size={20} color="white" />
</TouchableOpacity>
<TouchableOpacity onPress={handlePreviousTrack}>
<CsIcons name="Previous" size={50} color="white" />
</TouchableOpacity>
<TouchableOpacity onPress={Playpause}>
{isPlaying ? (
<CsIcons name="Peuse" size={80} color="white" />
) : (
<CsIcons name="Play" size={80} color="white" />
)}
</TouchableOpacity>
<TouchableOpacity>
<CsIcons
name="Next"
size={50}
color="white"
onPress={handleNextTrack}
/>
</TouchableOpacity>
<TouchableOpacity>
<CsIcons name="Repeat" size={20} color="white" />
</TouchableOpacity>
</View>
<View style={style.bottomcontroller}>
<TouchableOpacity>
<CsIcons name="Share" size={20} color="white" />
</TouchableOpacity>
<TouchableOpacity>
<CsIcons name="Sort-by" size={20} color="white" />
</TouchableOpacity>
</View>
</View>
);
};
请帮我解决这个问题我该怎么做
谢谢
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。