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

Posted 2023-03-14

【中文标题】当音频组件处于焦点时，从图像和音频列表中播放音频

【英文标题】：Play audio from list of images and audio, when audio component is in focus

【发布时间】：2021-04-07 12:26:36

【问题描述】：

我有一个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-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),
                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

【参考方案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 )