React Native实现仿抖音视频列表(滑动切换)

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_38356174/article/details/96439456

实现思路:
视频播放采用react-native-video,非常好用的视频播放库,列表整体采用FlatList实现,每一个item都占一整屏(flex设为1),再给FlatList设定pagingEnabled属性(滑动滚动一屏),viewabilityConfig中设定可见区域滑动的阈值。

效果图:
在这里插入图片描述

实现过程:

我的代码使用了react-native-ui-lib库,所以直接复制控件的属性会报错,把写在标签里的style样式写进对应控件的style={{}}中。

react-native-video的具体导入和使用方法 就自己去github看一下把,文档说明非常详细

constructor(props){
        super(props)
        this.state={
            data:tempCollect,//我模拟的数据 这个就自行找一些视频url就好
            isPause:true, //控制播放器是否播放,下面的代码有解释一个列表只需要一个state控制,而不用数组
            current:0,//表示当前item的索引,通过这个实现一个state控制全部的播放器
        }
        this.renderItem = this.renderItem.bind(this)
        this._onViewableItemsChanged = this._onViewableItemsChanged.bind(this)
    }

render方法代码:

	render(){
		const VIEWABILITY_CONFIG = {
    		viewAreaCoveragePercentThreshold: 80,//item滑动80%部分才会到下一个
		};
        return(
            <View>
                <FlatList
                    data={videoUrl}
                    renderItem={this.renderItem}
                    horizontal={false}
                    pagingEnabled={true}
                    getItemLayout={(data, index) => {
                        return {length: height, offset: height * index, index}
                    }}
                    keyExtractor={(item, index) => index.toString()}
                    viewabilityConfig={VIEWABILITY_CONFIG}
                    showsHorizontalScrollIndicator={false}
                    onViewableItemsChanged={this._onViewableItemsChanged}
                />
                {/*顶部 关闭、搜索 按钮*/}
                <View style={{position:'absolute',width:width,}}>
                    <View row style={{justifyContent: 'space-between',alignItems: 'center',width:width,padding:20}} >
                        <TouchableOpacity onPress={()=>{
                            this.props.navigation.goBack();
                        }}>
                            <Image source={require('../../res/img/shootVideo/close.png')} style={{width:30,height:30}} />
                        </TouchableOpacity>
                        <TouchableOpacity >
                            <Image source={require('../../res/img/shootVideo/search.png')} style={{width:30,height:30}} />
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        )
    }
     _onViewableItemsChanged({viewableItems, changed}) {
		//这个方法为了让state对应当前呈现在页面上的item的播放器的state
		//也就是只会有一个播放器播放,而不会每个item都播放
		//可以理解为,只要不是当前再页面上的item 它的状态就应该暂停
		//只有100%呈现再页面上的item(只会有一个)它的播放器是播放状态
        if(viewableItems.length === 1){
            this.setState({
                current:viewableItems[0].index,
            })
        }

    }

FlatList中renderItem布局代码:

/**  item布局 播放器 等*/
    renderItem({item,index}){
        return(
            <View style={{width:width,height:height-STATUSBAR_HEIGHT}}>
                <TouchableWithoutFeedback style={{flex:1}} onPress={()=>{
                    this.setState({
                        isPause:!this.state.isPause,
                    })
                }}>
                    <Video source={{uri:item}}
                           style={{flex: 1,backgroundColor:'#000'}}
                           repeat={true}
                           paused={index===this.state.current?this.state.isPause:true}
                           resizeMode='contain'
                    >
                    </Video>
                </TouchableWithoutFeedback>
                {/*信息(头像,标题等)、写评论*/}
                <View column style={{position:'absolute',width:width,height:height-STATUSBAR_HEIGHT,justifyContent:'flex-end',padding: 20,marginBottom:30}}>
                    <View row style={{alignItems:'center'}}>
                        <Image source={require('../../res/img/shootVideo/user_icon.png')} style={{width:50,height:50,borderRadius:50,}} />
                        <Text style={{fontSize:15,color:'#fff',marginLeft:10}}>懒散少女和猫</Text>
                        <TouchableOpacity center style={{width:60,height:30,backgroundColor:'#f98589',borderRadius:5,marginLeft:10}}>
                            <Text style={{fontSize:14,color:'#fff'}}>关注</Text>
                        </TouchableOpacity>
                    </View>
                    <Text style={{fontSize:14,color:'#fff',marginTop:10}}>美丽的傍晚</Text>
                    <View style={{flexDirection:'row',alignItems:'center',backgroundColor:'rgba(0,0,0,0.5)',borderRadius:5,padding:3,width:155,marginTop:10}}>
                        <Image source={require('../../res/img/shootVideo/bgmusic.png')} style={{width:15,height:15}} />
                        <Text style={{fontSize:13,color:'#fff',marginLeft:10}}>@懒散的少女和猫</Text>
                    </View>
                    <View style={{marginTop:10}}>
                        <TouchableOpacity row style={{backgroundColor:'#4d4d4d',borderRadius:17,padding:10,alignItems:'center',width:270}}>
                            <Image source={require('../../res/img/shootVideo/write_review.png')} style={{width:15,height:15}} />
                            <Text style={{fontSize:14,color:'#fff',marginLeft:10}}>写评论...</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                {/*底部 右侧 功能键 (我拍,点赞,评论,转发)*/}
                <View column style={{position:'absolute',width:width,height:height-STATUSBAR_HEIGHT,justifyContent:'flex-end',alignItems:'flex-end',padding: 20}}>
                    <TouchableOpacity column center style={styles.bottomRightBn} >
                        <Image source={require('../../res/img/shootVideo/shoot.png')} resizeMode={'contain'} style={styles.bottomRightImage}/>
                        <Text style={styles.bottomRightText}>我拍</Text>
                    </TouchableOpacity>
                    <TouchableOpacity column center style={styles.bottomRightBn}>
                        <Image source={require('../../res/img/shootVideo/like.png')} resizeMode={'contain'} style={styles.bottomRightImage}/>
                        <Text style={styles.bottomRightText}>2.1万</Text>
                    </TouchableOpacity>
                    <TouchableOpacity column center style={styles.bottomRightBn}>
                        <Image source={require('../../res/img/shootVideo/review.png')} resizeMode={'contain'} style={styles.bottomRightImage}/>
                        <Text style={styles.bottomRightText}>300</Text>
                    </TouchableOpacity>
                    <TouchableOpacity column center style={[styles.bottomRightBn,{marginBottom:50}]}>
                        <Image source={require('../../res/img/shootVideo/share.png')} resizeMode={'contain'} style={styles.bottomRightImage}/>
                        <Text style={styles.bottomRightText}>分享</Text>
                    </TouchableOpacity>
                </View>
                {/* 屏幕中央 播放按钮 */}
                {
                    this.state.isPause?
                        <View column center flex style={{position:'absolute',width:width,height:height-STATUSBAR_HEIGHT,}}>
                            <TouchableOpacity
                                onPress={()=>{this.setState({
                                    isPause:!this.state.isPause,
                                })}}
                            >
                                <Image source={require('../../res/img/shootVideo/play.png')} resizeMode={'contain'} style={{width:60,height:60}} />
                            </TouchableOpacity>
                        </View>:null
                }
            </View>
        )
    }

代码中用到的样式:

const styles = StyleSheet.create({
	container: {
		flex: 1,
	},
	center: {
		justifyContent: 'center',
		alignItems: 'center',
	},
    bottomRightBn:{
        width:50,
        height:50,
        marginTop:20,
    },
    bottomRightImage:{
        width:30,
        height:30,
    },
    bottomRightText:{
        fontSize:14,
        color:'#fff',
        marginTop:5,
    }
});
展开阅读全文

没有更多推荐了,返回首页