ReactNative基础(三)了解ScrollView并打造一个Banner效果

前端之家收集整理的这篇文章主要介绍了ReactNative基础(三)了解ScrollView并打造一个Banner效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

博客基于react-native-0.48.4

ScrollView简介

  • 一个包装了平台的ScrollView(滚动视图)的组件,同时还集成了触摸锁定的“响应者”系统。
  • 这个就跟Android中的ScrollView总体来说是一样的,将会超出屏幕的视图使用ScrollView包裹来滑动查看。
  • ScrollView文档属性介绍

来编写个案例实现下

新创建个ScrollTest.js组件,然后在index.android.js中引入这个组件

index.android.js

var Scroll = require('./src/scrollTest');

export default class UseScrollView extends Component {
    render() {
        return (
            <View style={{flex: 1}}>
                <Scroll/>
            </View>
        );
    }
}

AppRegistry.registerComponent('UseScrollView',() => UseScrollView);

在组件中创建5个视图让内容超出屏幕,这样使用ScrollView就可以清楚的看到效果

//屏幕信息
var dimensions = require('Dimensions');
//获取屏幕的宽度和高度
var {width} = dimensions.get('window');

class ScrollTest extends Component {
    render() {
        return (
            <ScrollView>
                {this.getView()}
            </ScrollView>
        );
    }

    getView() {
        var all = [];
        var colors = ['red','blue','green','black','gray'];
        for (var i = 0; i < colors.length; i++) {
            //往数组添加元素
            all.push(
                //往数组添加元素一定要加一个唯一标识
                <View key={i} style={{
                    justifyContent: 'center',alignItems: 'center',backgroundColor: colors[i],width: width,height: 180
                }}>
                    <Text style={{color: 'white'}}>第{i + 1}个文本</Text>
                </View>
            );
        }
        //返回数据
        return all;
    }
}

module.exports = ScrollTest;

效果图:

使用呢也是超级的简单,将需要滑动的内容包裹即可。

了解ScrollView常用的一些属性

  • horizontal bool 当此属性为true的时候,所有的子视图会在水平方向上排成一行,而不是默认的在垂直方向上排成一列。默认值为false。
  • showsHorizontalScrollIndicator bool 当此属性为true的时候,显示一个水平方向的滚动条。
  • showsVerticalScrollIndicator bool 当此属性为true的时候,显示一个垂直方向的滚动条。
  • pagingEnabled bool 当值为true时,滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。默认值为false。
  • scrollEnabled bool 当值为false的时候,内容不能滚动,默认值为true。
  • onMomentumScrollEnd?: function 滚动动画结束时调用函数
  • 更多属性方法介绍可以看这里ScrollView

将ScrollView设置为水平滚动,来查看下效果

好了,基本使用也就这些了;接下来使用ScrollView实现一个自动轮播的Banner。

使用ScrollView打造一个轮播图,创建一个banner.js组建来码代码

先来欣赏一下效果图这样才有看下去的动力,是吧!

第一步:定义好我们的图片资源,创建一个水平的ScrollView并循环往里面添加需要展示的图片

var banner = [
    'http://oweq6in8r.bkt.clouddn.com/about.jpg','http://oweq6in8r.bkt.clouddn.com/liuliangqiu.jpg','http://oweq6in8r.bkt.clouddn.com/rn.jpeg','http://image.baidu.com/search/地址太长/%3D0.jpg'
];
//屏幕信息
var dimensions = require('Dimensions');
//获取屏幕的宽度和高度
var {width} = dimensions.get('window');

class Banner extends Component {

    render() {
        return (
            <View style={styles.container}>
                <ScrollView
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    pagingEnabled={true}>

                    {/*显示轮播图的图片内容*/}
                    {this.getImages()}
                </ScrollView>
            </View>

        );
    }

    //获取轮播图显示图片
    getImages() {
        var images = [];
        for (var i = 0; i < banner.length; i++) {
            images.push(
                <View key={i}>
                    {/*将图片的宽度设置为屏幕宽度*/}
                    {<Image source={{uri: banner[i]}} style={styles.image}/>}
                </View>
            );
        }
        return images;
    }

}

const styles = StyleSheet.create({
    container: {
        marginTop: 8,},image: {
        width: width,height: 240,}
});

module.exports = Banner;
  • 一个可以横向滑动的Viewpager效果就出来了

第二步:添加底部页面指示器,在render()函数添加代码就不贴出所有了,避免篇幅太长。

<ScrollView>
    ...
</ScrollView>
{/*生成底部的圆点指示器*/}
<View style={styles.indicator}>
    {this.getIndicators()}
</View>


//获取左下角的4个圆点
getIndicators() {
    var circles = [];
    for (var i = 0; i < banner.length; i++) {
        circles.push(
            <Text key={i}
                  style={styles.unselected}>&bull;</Text>//&bull; html转义字符圆点
        );
    }
    return circles;
}

//底部指示器的样式
indicator: {
    width: width,height: 40,position: 'absolute',bottom: 0,//放置在底部
    backgroundColor: 'rgba(0,0.5)',flexDirection: 'row',unselected: {
    marginLeft: 10,fontSize: 40,//也就是圆点的大小
    color: 'white'
}

底部指示器效果

第三步:当我们左右滑动的时候我们需要来改变底部指示器圆点的颜色

  • 我们需要一个变量来保存当前滑动到了哪一个页面,我们可以定义一个var position
constructor(props) { super(props); this.state = { //当前显示的下标 position: 0,} }
<ScrollView
    //滚动动画结束时调用函数。一帧滚动结束
    onMomentumScrollEnd={(v) => this.onAnimationEnd(v)}>
    ...
</ScrollView>

//v 则为scrollView对象
onAnimationEnd(v) {
    //1.求出水平方向的偏移量
    var offsetX = v.nativeEvent.contentOffset.x;
    //2.根据偏移量求出当前的页数  width为图片的宽度(banner的宽度 )
    var position = Math.round(offsetX / width);
    //3.更新状态机,刷新圆点
    this.setState({
        position: position
    });
}
//在循环创建圆点时判断添加的点是不是当前显示页面,如果是的话则用选中的样式
getIndicators() {
    var circles = [];
    for (var i = 0; i < banner.length; i++) {
        circles.push(
            <Text key={i}
                  style={i === this.state.position ? styles.selected : styles.unselected}>&bull;</Text>
                  );
    }
    return circles;
}

selected: { marginLeft: 10,color: '#5CB85C' },

欣赏下成果:

到这里基本上一个可以手动滑动的ViewPager效果就做好了是不是very exciting,为了让我们的ViewPager更加高大上我们添加个定时器,让它自动轮播。

  • 我们先来定义轮播的间隔时间
static defaultProps = {
    //间隔时间 1000ms
    duration: 1000
};
  • 当组件完全渲染完成之后,开启我们的定时器
//绘制完成,开启定时器
componentDidMount() {
    this.startTimer();
}
//开启定时器,并每隔1sposition从0~3循环
startTimer() {
    //1.拿到ScrollView
    var scrollView = this.refs.scrollView;
    this.timer = setInterval(() => {
        //设置圆点的下标
        var curr = this.state.position;
        if (curr + 1 > banner.length - 1) {
            curr = 0;
        } else {
            curr++;
        }
        //更新状态机,更新当前下标
        this.setState({
            position: curr,});
        //滚动ScrollView,1.求出水平方向的平移量 offsetX = curr * width
        scrollView.scrollTo({x: curr * width,y: 0,animated: true})
    },this.props.duration);
}

var scrollView = this.refs.scrollView;这行代码就有点类似Android中的findViewById()获取视图中的某个View,所以我们需要在ScrollView中添加一个属性,如下:

<ScrollView
    ref="scrollView">
    //...
</ScrollView>
  • 最最最后一步,当我们手动滑动轮播图的时候需要取消掉计时器、滑动结束之后恢复循环。
<ScrollView
    ref="scrollView"
    //手指按下的时候,停止计时器
    onTouchStart={() => clearInterval(this.timer)}>
</ScrollView>

手指抬起的时候也就是,我们滑动一页完毕之后的事件;也就是我们上面使用到的一个函数onAnimationEnd()那么我们只需要在函数的末尾继续调用我们的开启计时器函数即可。

onAnimationEnd(v) {
    //...
    this.startTimer();
}

好了一个美妙的轮播图效果就完成了;不负春光,野蛮生长。

源码下载地址

推荐阅读:

原文链接:https://www.f2er.com/react/302701.html

猜你在找的React相关文章