-- --
正在获取
我的小世界 新手码农的小世界
继续浅谈react-native组件ScrollView的方法类的使用
发表于 2018-3-8 | | APP开发
scrollTo:(y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean)滚动到指定的x, y偏移处。第三个参数为是否启用平滑滚动动画

ScrollView综合使用实例

  • 这边通过所有 ScrollView 入门编程的经典案例 —— 图片轮播器更全面地理解 ScrollView 的使用

  • 为了更贴切实际开发,这边使用JSON来包装图片数据,内容如下图

先来实例化一个ScrollView与其内部的子视图,并进行一些测试必要的设置

  • 先获取json中的数据
// 获取json中的数据 var imageData = require('./Data/ImageData.json');
  • 接着我们来完成视图部分
pagingIndicatorStyle: {
        // 背景色(使背景色为全透明)
        backgroundColor:'rgba(255,255,255,0.0)',
        // 尺寸
        width:width,
        // 主轴方向与对齐方式
        flexDirection:'row',
        justifyContent:'center',
        // 绝对定位,使页码指示器盖在scrollView上面
        position:'absolute',
        bottom:0
    }
// 视图
    var CustomScrollView = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 实例化ScrollView */}
                    <ScrollView style={styles.scrollViewStyle}
                                horizontal={true}   // 水平方向
                                showsHorizontalScrollIndicator={false}  // 隐藏水平指示器
                                showsVerticalScrollIndicator={false}    // 隐藏垂直指示器
                                pagingEnabled={true}    // 开启分页功能
            >
                        {/* 实例化内部子视图 */}
                        {this.renderItem()}
                    </ScrollView>
                
                </View>
            );
        },

        // scrollView子视图
        renderItem() {
            var itemAry = [];

            // 获取json中图片
            var imgAry = imageData.data;

            // 根据json数据实例化视图
            for (var i = 0; i<imgAry.length; i++) {
                // 取出单个对象
                var item = imgAry[i];
                // 将子视图放进 itemAry
                itemAry.push(
                    // 实例化子视图
                    <Image key={i} style={styles.itemStyle} source={{uri:item.img}} />
                )
            }

            // 返回数组
            return itemAry;
        },

});

// 样式 var styles = StyleSheet.create({ container: { backgroundColor:'white' }, scrollViewStyle: { // 背景色 backgroundColor:'yellow', // 上边距 marginTop:20 }, itemStyle: { // 尺寸 width:width, height:200, // 图片等比例拉伸 resizeMode:'contain' }, });

效果:

图片轮播器肯定要有分页指示器,接下来我们就来制作

  • 视图部分
// 先初始化页码,确定初始化后显示哪个页面 getInitialState(){ return{ // 初始化当前页码 currentPage:0 } }, 实例化一个分页指示器
{/* 实例化分页指示器 */}
    <View style={styles.pagingIndicatorStyle}>
           {this.renderPagingIndicator()}
    </View>

    
    // 分页指示器
    renderPagingIndicator() {
        var itemAry = [], autoColor;

        // 获取json中图片
        var  imgAry = imageData.data;

        // 根据json数据实例化视图
        for (var i = 0; i<imgAry.length; i++) {
            // 取出单个对象
            var item = imgAry[i];

            // 跟随当前页改变对应 点 的颜色
            autoColor = (this.state.currentPage === i) ? {color:'orange'} : {color:'white'}

            // 将子视图放进 itemAry
            itemAry.push(
                // 实例化视图
                <Text key={i} style={[{fontSize:30}, autoColor]}>•</Text>
            )
        }

        // 返回数组
        return itemAry;
    },


样式部分:
    


   pagingIndicatorStyle: {
        // 背景色(使背景色为全透明)
        backgroundColor:'rgba(255,255,255,0.0)',
        // 尺寸
        width:width,
        // 主轴方向与对齐方式
        flexDirection:'row',
        justifyContent:'center',
        // 绝对定位,使页码指示器盖在scrollView上面
        position:'absolute',
        bottom:0
    }
  • 效果:


最后将完整代码放出,供参考import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ScrollView, Image } from 'react-native'; // 引入Dimensions库 var Dimensions = require('Dimensions'); var {width, height} = Dimensions.get('window'); // 获取json中的数据 var imageData = require('./Data/ImageData.json'); // 视图 var CustomScrollView = React.createClass({ // 先初始化页码,确定初始化后显示哪个页面 getInitialState(){ return{ // 初始化当前页码 currentPage:0 } }, render(){ return( <View style={styles.container}> {/* 实例化ScrollView */} <ScrollView style={styles.scrollViewStyle} horizontal={true} // 水平方向 showsHorizontalScrollIndicator={false} // 隐藏水平指示器 showsVerticalScrollIndicator={false} // 隐藏垂直指示器 pagingEnabled={true} // 开启分页功能 onMomentumScrollEnd={this.onAnimationEnd} // 当一帧滚动完毕的时候调用 > {/* 实例化内部子视图 */} {this.renderItem()} </ScrollView> {/* 实例化分页指示器 */} <View style={styles.pagingIndicatorStyle}> {this.renderPagingIndicator()} </View> </View> ); }, // 监听滚动 onAnimationEnd(e){ // 求出水平方向上的偏移量 var offSetX = e.nativeEvent.contentOffset.x; // 计算当前页码 var currentPage = offSetX / width; // 重新绘制UI this.setState({ currentPage:currentPage }); }, // 分页指示器 renderPagingIndicator() { var itemAry = [], autoColor; // 获取json中图片 var imgAry = imageData.data; // 根据json数据实例化视图 for (var i = 0; i<imgAry.length; i++) { // 取出单个对象 var item = imgAry[i]; // 跟随当前页改变对应 点 的颜色 autoColor = (this.state.currentPage === i) ? {color:'orange'} : {color:'white'} // 将子视图放进 itemAry itemAry.push( // 实例化视图 <Text key={i} style={[{fontSize:30}, autoColor]}>•</Text> ) } // 返回数组 return itemAry; }, // scrollView子视图 renderItem() { var itemAry = []; // 获取json中图片 var imgAry = imageData.data; // 根据json数据实例化视图 for (var i = 0; i<imgAry.length; i++) { // 取出单个对象 var item = imgAry[i]; // 将子视图放进 itemAry itemAry.push( // 实例化子视图 <Image key={i} style={styles.itemStyle} source={{uri:item.img}} /> ) } // 返回数组 return itemAry; }, }); // 样式 var styles = StyleSheet.create({ container: { backgroundColor:'white' }, scrollViewStyle: { // 背景色 backgroundColor:'yellow', // 上边距 marginTop:20 }, itemStyle: { // 尺寸 width:width, height:200, // 图片等比例拉伸 resizeMode:'contain' }, pagingIndicatorStyle: { // 背景色(使背景色为全透明) backgroundColor:'rgba(255,255,255,0.0)', // 尺寸 width:width, // 主轴方向与对齐方式 flexDirection:'row', justifyContent:'center', // 绝对定位,使页码指示器盖在scrollView上面 position:'absolute', bottom:0 } }); module.exports = CustomScrollView; 就先写到这边,如果有什么错误还请朋友们指出


评论:

乐泰胶水
2018-06-05 14:38
用胶水就用可赛新胶水和乐泰胶水这才是正确的选择https:www.hyhaote.com

发表评论:


GO