react native ScrollView 自定義控件 Banner (廣告滾動(dòng))

1、ScrollView介紹（官方解釋）：

ScrollView是一個(gè)通用的可滾動(dòng)的容器，你可以在其中放入多個(gè)組件和視圖，而且這些組件并不需要是同類型的。ScrollView不僅可以垂直滾動(dòng)（默認(rèn)），還能水平滾動(dòng)（通過horizontal屬性來設(shè)置）。

2、ScrollView常用屬性：

horizontal（布爾值）：當(dāng)此屬性為true的時(shí)候，所有的的子視圖會(huì)在水平方向上排成一行，而不是默認(rèn)的在垂直方向上排成一列。默認(rèn)值為false。

showsHorizontalScrollIndicator（布爾值）：當(dāng)此屬性為true的時(shí)候，顯示一個(gè)水平方向的滾動(dòng)條。

showsVerticalScrollIndicator（布爾值）：與showsHorizontalScrollIndicator相對(duì)，當(dāng)此屬性為true的時(shí)候，顯示一個(gè)垂直方向的滾動(dòng)條。

OnMomentumScrollEnd（function） ：當(dāng)一幀滾動(dòng)完畢的時(shí)候調(diào)用，e.nativeEvent.contentOffset，可以用來獲取偏移量。

onScrollBeginDrag（function） ：當(dāng)開始手動(dòng)拖拽的時(shí)候調(diào)用。

onScrollEndDrag（function） ：當(dāng)結(jié)束手動(dòng)拖拽的時(shí)候調(diào)用。

onScroll（function） ：在滾動(dòng)的過程中，每幀最多調(diào)用一次此回調(diào)函數(shù)。調(diào)用的頻率可以用scrollEventThrottle屬性來控制。

*注意：ScrollView是繼承自View，所以View中所有的屬性同樣適用于ScrollView。在此只介紹幾個(gè)常見的android和ios通用屬性。更多詳細(xì)屬性請(qǐng)移步到此處

例子：縱向滑動(dòng)

export default class App extends Component<{}> {

  render() {
      const screenWidth = Dimensions.get('window').width;
    return (
      <View style={styles.container}>
          <View>
              <Text
                  style={styles.welcome}
              >
                  頭部
              </Text>
          </View>
        <ScrollView
            ref="scrollView"
            horizontal={false}
            showsHorizontalScrollIndicator={false}
            pagingEnabled={true}
           >
                <Text
                    style={styles.welcome}
                >
                    ScrollView 縱向滑動(dòng)
                </Text>
                <Image source={{ uri: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494233305839&di=e1647289d1fcd778f64ddf3ccaf6fcfa&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1016%2Fgha%2F1%2F1350006791532.jpg"}}
                       style={{width:screenWidth,height:240}}></Image>
                <Image source={{ uri: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494236802350&di=72da30f79403ec28b124424f2c24a9f6&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2014%2Flxy%2F2014%2F09%2F16%2F8.jpg"}}
                       style={{width:screenWidth,height:240}}></Image>

                <Image source={{ uri: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494236734637&di=bb81b0fa9b2040542a4a6f9fcc2d0359&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1016%2Fgha%2F1%2F1350006753179.jpg"}}
                       style={{width:screenWidth,height:240}}></Image>


        </ScrollView>
      </View>
    );
  }
}
縱向滑動(dòng).png

例子：橫向 （自定義ScrollView）

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image
} from 'react-native';
var Dimensions = require('Dimensions');
var ScreenWidth=Dimensions.get('window').width;

class MyScrollViewTwo extends Component{

    renderChilds= () =>{
        var imgeList=['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494233305839&di=e1647289d1fcd778f64ddf3ccaf6fcfa&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1016%2Fgha%2F1%2F1350006791532.jpg'
                      ,'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494236802350&di=72da30f79403ec28b124424f2c24a9f6&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2014%2Flxy%2F2014%2F09%2F16%2F8.jpg'
                     ,'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494236734637&di=bb81b0fa9b2040542a4a6f9fcc2d0359&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1016%2Fgha%2F1%2F1350006753179.jpg'
        ];

        return imgeList.map((item,i)=>{
            return<Image  key ={`item${i}`} source={{uri:item}}
                          style={{width:ScreenWidth,height:240}}></Image>

        });

    }

    render(){
         return  <ScrollView
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}
                        pagingEnabled={true}
                    >
             {this.renderChilds()}
         </ScrollView>;

    }
}
module.exports = MyScrollViewTwo;
橫向滑動(dòng).png

例子自定義Banner

/**
 * Created by Android on 2017/12/12.
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image
} from 'react-native';
var Dimensions = require('Dimensions');
var ScreenWidth=Dimensions.get('window').width;
var  imgeList=require('./jsons.json');

class Banner extends Component{
        constructor(props){
            super(props);
            this.state={
                currentPage:0
            };

        }

    // 渲染圖片
    renderChilds= () =>{
        return imgeList.data.map((item,i)=>{
            return<Image  key ={`item${i}`} source={{uri:item.img}}
                          style={{width:ScreenWidth,height:240}}></Image>

        });

    }
    /**
     * 渲染圓
     */
    renderCircles=()=>{
        return imgeList.data.map((item ,i)=>{
            var style = {};
            //當(dāng)前頁面的的指示器，橘黃色
            if(i === this.state.currentPage){
                style = {color:'orange'};
            }
            return <Text key={`text${i}`} style={[styles.circleStyle,style]}>&bull;</Text>
        });

    }

    handleScroll = (e)=>{
        var x = e.nativeEvent.contentOffset.x;
        var currentPage = Math.floor(e.nativeEvent.contentOffset.x / ScreenWidth);
        this.setState({currentPage:currentPage});
        console.log("currentPage:"+currentPage);
    }

    //定時(shí)器
    startTimer = ()=>{
        this.timer = setInterval(()=>{
            //計(jì)算出要滾動(dòng)到的頁面索引，改變state
            var currentPage = ++this.state.currentPage == imgeList.data.length ? 0 : this.state.currentPage;
            this.setState({currentPage:currentPage});
            //計(jì)算滾動(dòng)的距離
            var offsetX = currentPage * ScreenWidth;
            this.refs.scrollView.scrollTo({x:offsetX,y:0,animated:true});
            console.log(currentPage);
        },2000);
    }
    //開始滑動(dòng)
    handleScrollBegin = ()=>{
        console.log("handleScrollBegin");
        clearInterval(this.timer);
    }

    handleScrollEnd = ()=>{
        console.log("handleScrollEnd");
        this.startTimer();
    }

    render(){
         return <View style={styles.flexDirection}>
             {/*
                return 后面不能回車
              */}
                <ScrollView
                    ref="scrollView"
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    pagingEnabled={true}
                    onMomentumScrollBegin={this.handleScroll}
                    onScrollBeginDrag={this.handleScrollBegin}
                    onScrollEndDrag={this.handleScrollEnd}
                 >
                    {this.renderChilds()}
                </ScrollView>
                <View style={styles.circleWrapperStyle}>
                    {this.renderCircles()}
                </View>
            </View>;


    }

    //定時(shí)器  生命周期
    componentDidMount = ()=>{
        this.startTimer();
    }
    //取消定時(shí)器
    componentWillUnmount =() => {
        clearInterval(this.timer);
    }
}



var styles =StyleSheet.create({
    container: {
        flexDirection:'column'
    },
    circleWrapperStyle:{
        flexDirection:'row',
        //absolute“絕對(duì)”定位，參照標(biāo)準(zhǔn)父容器
        //relative “相對(duì)”對(duì)位，相對(duì)于原來的位置
        position:'absolute',
        bottom:0,
        left:10
    },
    circleStyle:{
        fontSize:25,
        color:'#FFF'
    }
});
module.exports = Banner;

return 后面不能回車

banner.png

jsons.json

{
  "data": [
    {
      "img" : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494233305839&di=e1647289d1fcd778f64ddf3ccaf6fcfa&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1016%2Fgha%2F1%2F1350006791532.jpg",
      "title" : "你那一笑傾國傾城"
    },
    {
      "img" : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494236802350&di=72da30f79403ec28b124424f2c24a9f6&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2014%2Flxy%2F2014%2F09%2F16%2F8.jpg",
      "title" : "那里記錄了最唯美的愛情故事"
    },
    {
      "img" : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494236734637&di=bb81b0fa9b2040542a4a6f9fcc2d0359&imgtype=0&src=http%3A%2F%2Ftupian.enterdesk.com%2F2012%2F1016%2Fgha%2F1%2F1350006753179.jpg",
      "title" : "我怎么是一個(gè)剩女"
    }

  ]
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容