通过React-Native实现自定义横向滑动进度条的 ScrollView组件

更新时间：2024年02月05日 11:36:09 作者：清风不暖人

开发一个首页摆放菜单入口的ScrollView可滑动组件,允许自定义横向滑动进度条,且内部渲染的菜单内容支持自定义展示的行数和列数,在内容超出屏幕后,渲染顺序为纵向由上至下依次排列,对React Native横向滑动进度条相关知识感兴趣的朋友一起看看吧

概要

本篇文章概述了通过React-Native实现一个允许自定义横向滑动进度条的ScrollView组件。

需求

开发一个首页摆放菜单入口的ScrollView可滑动组件（类似某淘首页上的菜单效果），允许自定义横向滑动进度条，且内部渲染的菜单内容支持自定义展示的行数和列数，在内容超出屏幕后，渲染顺序为纵向由上至下依次排列。

Animated 动画

点此进入学习

ScrollView 滑动组件

点此进入学习

自定义滑动进度条

确定参数

首先，让我们确定一下自定义滑动进度条需要哪些参数来支持：

初始位置时，确定显示进度的条的宽度（barWidth）
滑动进度，以此来确定上面这个条的位置现在应该到哪里了（marLeftAnimated）

计算参数

1.想要确定显示进度的条的宽度（barWidth），那么必须先知道三个值：

ScrollView总宽度（containerStyle传入）
进度条背景的宽度（indicatorBgStyle传入）
ScrollView内部内容总宽度（childWidth，通过onContentSizeChange方法测量）

然后我们就可以进行如下计算，这样得到的_barWidth就是显示进度的条的宽度（barWidth）：

let _barWidth = (this.props.indicatorBgStyle.width * this.props.containerStyle.width) / this.state.childWidth;

2.想要确定显示进度的条的位置（marLeftAnimated），那么必须先知道两个值：

ScrollView可滑动距离（scrollDistance）
进度部分可滑动距离（leftDistance）

然后我们就可以进行如下定义，这样得到的marLeftAnimated，输出值即为进度条的距左距离：

let scrollDistance = this.state.childWidth - this.props.containerStyle.width
	...
    //显示滑动进度部分的距左距离
    let leftDistance = this.props.indicatorBgStyle.width - _barWidth;
    const scrollOffset = this.state.scrollOffset
    this.marLeftAnimated = scrollOffset.interpolate({
      inputRange: [0, scrollDistance],  //输入值区间为内容可滑动距离
      outputRange: [0, leftDistance],  //映射输出区间为进度部分可改变距离
      extrapolate: 'clamp',  //钳制输出值
      useNativeDriver: true,
    })

滑动进度条的实现

通过Animated.View，定义绝对位置，将两个条在Z轴上下重叠一起。

<View style={[{alignSelf:'center'},this.props.indicatorBgStyle]}>
      <Animated.View
        style={[this.props.indicatorStyle,{
          position: 'absolute',
          width: this.state.barWidth,
          top: 0,
          left: this.marLeftAnimated,
        }]}
      />
    </View>

之后就通过onSroll事件获取滑动偏移量，然后通过偏移量改变动画的值，这里我就不多说了，不明白的可以看我上一篇文章。

首页定制菜单

确定参数

首先，让我们确定一下实现首页定制菜单需要哪些参数来支持：

列数量（columnLimit）
行数量（rowLimit）

渲染方式

根据行列数量，决定每屏的菜单总数。根据行数量，决定渲染结果数组里有几组，一行就是一组。

let optionTotalArr = [];  //存放所有option样式的数组
	//根据行数，声明用于存放每一行渲染内容的数组
	for( let i = 0; i < rowLimit; i++ ) optionTotalArr.push([])

1.没超出屏幕时，确定渲染行的方式如下：

if(index < columnLimit * rowLimit){
		//没超出一屏数量时，根据列数更新行标识
		rowIndex = parseInt(index / columnLimit)
	}

2.超出屏幕时，确定渲染行的方式如下：

//当超出一屏数量时，根据行数更新行标识
	rowIndex = index % rowLimit;

遍历输出

根据行数，遍历存放计算后的行内容数组。

optionTotalArr[rowIndex].push(
        <TouchableOpacity 
          key={index} 
          activeOpacity={0.7}
          style={[styles.list_item,{width:size}]} 
          onPress={()=>alert(item.name)}
        >
          <View style={{width:size-20,backgroundColor:'#FFCC00',alignItems:'center',justifyContent:'center'}}>
           <Text style={{ fontSize:18, color:'#333',marginVertical:20}}>{item.name}</Text>
          </View>
		</TouchableOpacity>
	)

效果图

在这里插入图片描述

源码

IndicatorScrollView.js

import React, { PureComponent } from 'react';
import {
  StyleSheet,
  View,
  ScrollView,
  Animated,
  Dimensions,
} from 'react-native';
import PropTypes from 'prop-types';
const { width, height } = Dimensions.get('window');
export default class IndicatorScrollView extends PureComponent {
  static propTypes = {
    //最外层样式（包含ScrollView及滑动进度条的全部区域
    containerStyle: PropTypes.oneOfType([  
      PropTypes.object,
      PropTypes.array,
    ]),
    //ScrollView的样式
    style: PropTypes.oneOfType([
      PropTypes.object,
      PropTypes.array,
    ]),
    //滑动进度条底部样式
    indicatorBgStyle: PropTypes.oneOfType([
      PropTypes.object,
      PropTypes.array,
    ]),
    //滑动进度条样式
    indicatorStyle: PropTypes.oneOfType([
      PropTypes.object,
      PropTypes.array,
    ]),
  }
  static defaultProps = {
    containerStyle: { width: width },
    style: {},
    indicatorBgStyle:{
      width: 200,
      height: 20, 
      backgroundColor: '#ddd'
    },
    indicatorStyle:{
      height:20,
      backgroundColor:'#000'
    },
  }
  constructor(props) {
    super(props);
    this.state = {
      //滑动偏移量
      scrollOffset: new Animated.Value(0),
      //ScrollView子布局宽度
      childWidth: this.props.containerStyle.width,
      //显示滑动进度部分条的长度
      barWidth: props.indicatorBgStyle.width / 2,
    };
  }
  UNSAFE_componentWillMount() {
    this.animatedEvent = Animated.event(
      [{
          nativeEvent: {
            contentOffset: { x: this.state.scrollOffset }
          }
      }]
    )
  }
  componentDidUpdate(prevProps, prevState) {
    //内容可滑动距离
    let scrollDistance = this.state.childWidth - this.props.containerStyle.width
    if( scrollDistance > 0 && prevState.childWidth != this.state.childWidth){
      let _barWidth = (this.props.indicatorBgStyle.width * this.props.containerStyle.width) / this.state.childWidth;
      this.setState({
        barWidth: _barWidth,
      })
      //显示滑动进度部分的距左距离
      let leftDistance = this.props.indicatorBgStyle.width - _barWidth;
      const scrollOffset = this.state.scrollOffset
      this.marLeftAnimated = scrollOffset.interpolate({
        inputRange: [0, scrollDistance],  //输入值区间为内容可滑动距离
        outputRange: [0, leftDistance],  //映射输出区间为进度部分可改变距离
        extrapolate: 'clamp',  //钳制输出值
        useNativeDriver: true,
      })
    }
  }
  render() {
    return (
      <View style={[styles.container,this.props.containerStyle]}>
        <ScrollView
          style={this.props.style}
          horizontal={true}  //横向
          alwaysBounceVertical={false}
          alwaysBounceHorizontal={false}
          showsHorizontalScrollIndicator={false}  //自定义滑动进度条，所以这里设置不显示
          scrollEventThrottle={0.1}  //滑动监听调用频率
          onScroll={this.animatedEvent}  //滑动监听事件，用来映射动画值
          scrollEnabled={ this.state.childWidth - this.props.containerStyle.width>0 ? true : false }
          onContentSizeChange={(width,height)=>{
            if(this.state.childWidth != width){
              this.setState({ childWidth: width })
            }
          }}
        >
          {this.props.children??      
            <View 
              style={{ flexDirection: 'row', height: 200 }}
            >
              <View style={{ width: 300, backgroundColor: 'red' }} />
              <View style={{ width: 300, backgroundColor: 'yellow' }} />
              <View style={{ width: 300, backgroundColor: 'blue' }} />
            </View>
          }
        </ScrollView>
        {this.state.childWidth - this.props.containerStyle.width>0?
          <View style={[{alignSelf:'center'},this.props.indicatorBgStyle]}>
            <Animated.View
              style={[this.props.indicatorStyle,{
                position: 'absolute',
                width: this.state.barWidth,
                top: 0,
                left: this.marLeftAnimated,
              }]}
            />
          </View>:null
        }
      </View>
    );
  };
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Scroll.js

import React, { Component } from 'react';
import {
  StyleSheet, 
  View,
  Dimensions,
  TouchableOpacity,
  Text,
} from 'react-native';
import IndicatorScrollView from '../../component/scroll/IndicatorScrollView';
const { width, height } = Dimensions.get('window');
const columnLimit = 4;  //option列数量
const rowLimit = 2;  //option行数量
// 编写UI组件
export default class Scroll extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
    this.itemArr = [
      {
        name: '1'
      },
      {
        name: '2'
      },
      {
        name: '3'
      },
      {
        name: '4'
      },
      {
        name: '5'
      },
      {
        name: '6'
      },
      {
        name: '7'
      },
      {
        name: '8'
      },
      {
        name: '9'
      },
      {
        name: '10'
      },
      {
        name: '11'
      },
      {
        name: '12'
      }
    ]
  }
	renderOption(){
		let size = (width-20)/columnLimit; //每个option的宽度
		let optionTotalArr = [];  //存放所有option样式的数组
		//根据行数，声明用于存放每一行渲染内容的数组
		for( let i = 0; i < rowLimit; i++ ) optionTotalArr.push([])
		this.itemArr.map((item,index) => {
			let rowIndex = 0;  //行标识
			if(index < columnLimit * rowLimit){
				//没超出一屏数量时，根据列数更新行标识
				rowIndex = parseInt(index / columnLimit)
			}else{
				//当超出一屏数量时，根据行数更新行标识
				rowIndex = index % rowLimit;
			}
			optionTotalArr[rowIndex].push(
        <TouchableOpacity 
          key={index} 
          activeOpacity={0.7}
          style={[styles.list_item,{width:size}]} 
          onPress={()=>alert(item.name)}
        >
          <View style={{width:size-20,backgroundColor:'#FFCC00',alignItems:'center',justifyContent:'center'}}>
           <Text style={{ fontSize:18, color:'#333',marginVertical:20}}>{item.name}</Text>
          </View>
				</TouchableOpacity>
			)
		})
    return(
			<View
				style={{flex:1,justifyContent:'center',paddingHorizontal:10}}
		  >
				{
					optionTotalArr.map((item,index)=>{
						return <View key={index} style={{flexDirection:'row'}}>{item}</View>
					})
				}
			</View>
    )
	}
  render() {
    return (
      <View style={styles.container}>
        <View style={{flex:1}}/>
        <IndicatorScrollView 
          containerStyle={styles.list_style}
          indicatorBgStyle={{marginBottom:10,borderRadius:2,width:40,height:4,backgroundColor:'#BFBFBF'}}
          indicatorStyle={{borderRadius:2,height:4,backgroundColor:'#CC0000'}}
        >
          {this.renderOption()}
        </IndicatorScrollView>
        <View style={{flex:1}}/>
      </View >
    );
  };
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  list_style:{
		flex: 1,
    width: width,
    backgroundColor:'#6699FF'
  },
  list_item:{
    marginVertical:20,
		justifyContent:'center',
    alignItems:'center',
	},
});

注：本文为作者原创，转载请注明作者及出处。

到此这篇关于通过React-Native实现自定义横向滑动进度条的 ScrollView组件的文章就介绍到这了,更多相关React Native横向滑动进度条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解如何使用React和MUI创建多选Checkbox树组件
这篇文章主要为大家详细介绍了如何使用 React 和 MUI（Material-UI）库来创建一个多选 Checkbox 树组件,该组件可以用于展示树形结构的数据,并允许用户选择多个节点,感兴趣的可以了解下
2024-01-01
webpack3+React 的配置全解
本篇文章主要介绍了webpack3+React 的配置全解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
深入理解React虚拟Dom
虚拟DOM是一种轻量级的JavaScript对象,用于描述真实网页的DOM结构和属性,存在于内存中,本文就来详细的介绍React虚拟Dom的实现,感兴趣的可以了解一下
2026-01-01
React经典面试题之倒计时组件详解
这些天也都在面试,面试的内容也大多千篇一律,无外乎vue、react这些框架的一些原理,和使用方法,但是也遇到些有趣的题目,这篇文章主要给大家介绍了关于React经典面试题之倒计时组件的相关资料,需要的朋友可以参考下
2022-03-03
React Native 截屏组件的示例代码
本篇文章主要介绍了React Native 截屏组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
react脚手架如何配置less和ant按需加载的方法步骤
这篇文章主要介绍了react脚手架如何配置less和ant按需加载的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
react中的虚拟dom和diff算法详解
这篇文章主要介绍了react中的虚拟dom和diff算法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04
详解如何在React中优雅的使用addEventListener
这篇文章主要为大家详细介绍了如何在React中优雅的使用addEventListener，文中的示例代码简洁易懂，对大家学习React有一定的帮助，需要的可以参考一下
2023-01-01
回顾Javascript React基础
这篇文章主要介绍了Javascript React基础，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的同学可以参考一下
2019-06-06
React自定义tab组合组件的实例详解
本文介绍了如何利用React的cloneElementAPI实现自定义Tab组合组件,通过将TabItem作为Tab的子组件,使用React.cloneElement方法传递props和事件处理函数,实现了父子组件状态联动,本文结合实例代码介绍的非常详细,感兴趣的朋友一起看看吧
2026-02-02