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

2024-07-12 07:25| 来源: 网络整理| 查看: 265

实现思路：视频播放采用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( { return {length: height, offset: height * index, index} }} keyExtractor={(item, index) => index.toString()} viewabilityConfig={VIEWABILITY_CONFIG} showsHorizontalScrollIndicator={false} onViewableItemsChanged={this._onViewableItemsChanged} /> {/*顶部关闭、搜索按钮*/} {justifyContent: 'space-between',alignItems: 'center',width:width,padding:20}} > { this.props.navigation.goBack(); }}> {width:30,height:30}} /> ) } _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( {flex:1}} onPress={()=>{ this.setState({ isPause:!this.state.isPause, }) }}> {flex: 1,backgroundColor:'#000'}} repeat={true} paused={index===this.state.current?this.state.isPause:true} resizeMode='contain' > {/*信息（头像，标题等）、写评论*/} {alignItems:'center'}}> {fontSize:15,color:'#fff',marginLeft:10}}>懒散少女和猫 {fontSize:14,color:'#fff'}}>关注 {flexDirection:'row',alignItems:'center',backgroundColor:'rgba(0,0,0,0.5)',borderRadius:5,padding:3,width:155,marginTop:10}}> {fontSize:13,color:'#fff',marginLeft:10}}>@懒散的少女和猫 {backgroundColor:'#4d4d4d',borderRadius:17,padding:10,alignItems:'center',width:270}}> {fontSize:14,color:'#fff',marginLeft:10}}>写评论... {/*底部右侧功能键（我拍，点赞，评论，转发）*/} {position:'absolute',width:width,height:height-STATUSBAR_HEIGHT,}}> {this.setState({ isPause:!this.state.isPause, })}} >

【本文地址】

公司简介

联系我们