如何在 React 原生 ScrollView 轮播上播放特定视频？

Question

我有一个滚动视图，它有一个子视频组件数组。 它在 UI 上显示视频轮播。 我希望用户能够单击视频上方的播放按钮并播放该视频，但按照我的逻辑设置方式，所有视频一起播放，因为播放视频的条件存在于反应 useState 中。

看代码：

const VideosView = (props) => {
    const videoClips = props.route.params.data;
    const [state, setState] = React.useState(0);
    const [play, setPlay] = React.useState(false);

    return (
        <>
            <SafeAreaView pointerEvents='box-none' style={styles.root}>
                <Header
                    goBack={() => props.navigation.goBack()}
                    title={state === 0 ? 'RYGGRöRLIGHET' : 'STYRKA & BALANS'}
                />
                <View style={styles.paragraphsContainer}>
                    <Text style={styles.title}>
                        {state === 0 ? 'Ryggrörlighet' : 'Styrka & Balans'}
                    </Text>
                    <Text style={styles.paragraph}>
                        'Utför övningen i ca 5 min för bästa resultat.'
                    </Text>
                    <View style={styles.circlesContainer}>
                        {renderImages.map((_, index) => {
                            return (
                                <TouchableOpacity key={index} onPress={() => setState(0)}>
                                    <View
                                        style={[
                                            styles.circles,
                                            { opacity: index === state ? 1 : 0.5 }
                                        ]}
                                    />
                                </TouchableOpacity>
                            );
                        })}
                    </View>
                </View>
            </SafeAreaView>
            <View style={styles.scrollViewContainer}>
                <ScrollView
                    bounces={false}
                    showsHorizontalScrollIndicator={false}
                    scrollEventThrottle={30}
                    onScroll={({ nativeEvent }) => {
                        const slide = Math.ceil(
                            nativeEvent.contentOffset.x / nativeEvent.layoutMeasurement.width
                        );
                        if (slide !== state) {
                            setState(slide);
                        }
                    }}
                    horizontal>
                    {videoClips.map((video, index) => (
                        <View style={{ position: 'relative' }}>
                            {!play && (
                                <TouchableOpacity
                                    style={{
                                        position: 'absolute',
                                        backgroundColor: 'rgba(255,255,255,0.5)',
                                        alignSelf: 'center',
                                        top: 130,
                                        width: 160,
                                        height: 160,
                                        borderRadius: 500,
                                        zIndex: 4000
                                    }}
                                    onPress={() => setPlay(true)}></TouchableOpacity>
                            )}
                            <Video

                                shouldPlay={play}
                                key={index}
                                source={{
                                    uri: video
                                }}
                                resizeMode='cover'
                                style={{ width: wp('100%'), height: hp('100%') }}
                            />
                        </View>
                    ))}
                </ScrollView>
            </View>
        </>
    );
};

我希望用户单击一个按钮并播放一个视频，使用轮播到 go 到下一个视频，单击播放并播放下一个视频。

请帮忙。

Answer 1

如果您将播放 state 从Boolean更改为Number ，您可能会解决您的问题。 方法如下：

    const [videoBeingDisplayedIndex, setVideoBeingDisplayedIndex] = React.useState(5);
    const [play, setPlay] = React.useState(5); // If it is equals to the video id the video should play, else it should not
...
    <Button onClick={() => setPlay(videoBeingDisplayedIndex)}>
        Play Video
    </Button>
    <VideoCarousel>
        {
            myVideoList.map((video, index) => {
                return (
                   <Video 
                       content={video} 
                       index={index} 
                       play={play === index} // Check if the current play state is equals to the video unique id
                   />
                );
            })
        }
    </VideoCarousel>
...

PS.：请记住，此代码段抽象了 react-native 元素并专注于问题。