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

如何解决当音频组件处于焦点时，从图像和音频列表播放音频

我有一个 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,{ "id": 4,]

我正在使用 react-native-track-player

如果音频组件处于焦点，我必须播放。 我到目前为止所尝试的：-

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),}}>
                <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

解决方法

使用 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 })