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

我有一个

图像

和

音频

列表，如下所示：-

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" },
    ]

我正在使用

如果音频部件处于焦点位置，我必须播放。 我一直在尝试的是：-

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
        ]
    });
}

平面列表的我的渲染部分

：-

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

---

它给了我一个错误：-

不支持动态更改可视项更改
使用
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 })

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