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

实现思路：
视频播放采用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}
                />
                {/*顶部 关闭、搜索 按钮*/}
                
                    
                        {
                            this.props.navigation.goBack();
                        }}>
                            
                        
                        
                            
                        
                    
                
            
        )
    }
     _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(
            
                {
                    this.setState({
                        isPause:!this.state.isPause,
                    })
                }}>
                    
                
                {/*信息（头像，标题等）、写评论*/}
                
                    
                        
                        懒散少女和猫
                        
                            关注
                        
                    
                    美丽的傍晚
                    
                        
                        @懒散的少女和猫
                    
                    
                        
                            
                            写评论...
                        
                    
                
                {/*底部 右侧 功能键 （我拍，点赞，评论，转发）*/}
                
                    
                        
                        我拍
                    
                    
                        
                        2.1万
                    
                    
                        
                        300
                    
                    
                        
                        分享
                    
                
                {/* 屏幕中央 播放按钮 */}
                {
                    this.state.isPause?
                        
                            {this.setState({
                                    isPause:!this.state.isPause,
                                })}}
                            >
                                
                            
                        :null
                }
            
        )
    }

代码中用到的样式：

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