当音频组件处于焦点时，播放图像和音频列表中的音频

Question

我有一个image和audio的列表，它们是：-

postArray: [
{ "id": 1, "media_type": "image", "media_url": "https://homepages.cae.wisc.edu/~ece533/images/airplane.png", "title": "image1" },
{ "id": 2, "media_type": "audio", "media_url": "https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3", "title": "audio1" },
{ "id": 3, "media_type": "image", "media_url": "https://homepages.cae.wisc.edu/~ece533/images/airplane.png", "title": "image1" },
{ "id": 4, "media_type": "audio", "media_url": "https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3", "title": "audio1" },
]

我正在使用react原生音轨播放器

如果音频组件在焦点上，我必须播放。到目前为止我一直在尝试：-

useEffect(() => {
audioSetup()
}, [])
async function audioSetup() {
await TrackPlayer.setupPlayer({});
await TrackPlayer.updateOptions({
stopWithApp: true,
capabilities: [
TrackPlayer.CAPABILITY_PLAY,
TrackPlayer.CAPABILITY_PAUSE,
TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
TrackPlayer.CAPABILITY_STOP
],
compactCapabilities: [
TrackPlayer.CAPABILITY_PLAY,
TrackPlayer.CAPABILITY_PAUSE
]
});
}

我的FlatList:-渲染部分

const renderPost = ({ item, index }) => {
if (item.media_type === "image") {
return (
<View style={{
marginBottom: constants.vh(16),
marginTop: constants.vh(16),
}}>
<ImagePost
backgroundImage={item.media_url}
profileImage={props.auth.userRegistered.profileImage ? props.auth.userRegistered.profileImage : "https://homepages.cae.wisc.edu/~ece533/images/girl.png"}
firstName={props.auth.userRegistered.firstName}
lastName={props.auth.userRegistered.lastName}
likeCount={649823}
commentCount={45423}
shareCount={46312}
isLiked={true}
musicTitle={item.title}
description={item.description}
/>
</View>
)
}
if (item.media_type === "audio"){
return (
<View style={{
marginBottom: constants.vh(16),
marginTop: constants.vh(16),
}}>
<AudioPost
backgroundImage={item.media_url}
profileImage={props.auth.userRegistered.profileImage ? props.auth.userRegistered.profileImage : "https://homepages.cae.wisc.edu/~ece533/images/girl.png"}
firstName={props.auth.userRegistered.firstName}
lastName={props.auth.userRegistered.lastName}
likeCount={649823}
commentCount={45423}
shareCount={46312}
isLiked={true}
musicTitle={item.title}
playedTime={10}
totalTime={100}
description={item.description}
/>
</View>
)
}

我的FlatList是：-

const onViewableItemsChanges = async (info) => {
await TrackPlayer.reset();
console.log("item view able changed", info);
if (info.changed[0].item.media_type === "audio") {
audioSetup()
await TrackPlayer.add({
"id": "0",
"url": info.changed[0].item.media_url,
"artist": "author",
"title": "song titile"
});
await TrackPlayer.play();
}
}
<FlatList
data={state.postArray}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
renderItem={renderPost}
onViewableItemsChanged={onViewableItemsChanges}
viewabilityConfig={{ viewAreaCoveragePercentThreshold: 50 }}
keyExtractor={(item, index) => index.toString()}
/>

它给我错误：-Changing onViewableItemsChanged on the fly is not supported

Answer 1

使用useRef:-修复

const onViewRef = React.useRef((info) => {
TrackPlayer.reset();
setVideoUri("")
setVideoIndex(0)
if (info.changed[0].item.media_type === "audio") {
TrackPlayer.add({
"id": "0",
"url": info.changed[0].item.media_url,
"artist": "author",
"title": "song titile"
});
TrackPlayer.getDuration().then(totalDuration => {
console.log("totalDuration", totalDuration);
})
TrackPlayer.play();
}

})
const viewConfigRef = React.useRef({ viewAreaCoveragePercentThreshold: 50 })