React Native scrollview 循环播放

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Menlo; color: #008400 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #d4d4d4; min-height: 14.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC" }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; min-height: 17.0px }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #ce9178; background-color: #1e1e1e }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #d4d4d4; background-color: #ffffff; min-height: 14.0px }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #9cdcfe; background-color: #1e1e1e }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #c586c0; background-color: #1e1e1e }
p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #d4d4d4; background-color: #1e1e1e }
p.p12 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #4ec9b0; background-color: #1e1e1e }
p.p13 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #569cd6; background-color: #1e1e1e }
p.p14 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #dcdcaa; background-color: #1e1e1e }
p.p15 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #608b4e; background-color: #1e1e1e }
p.p16 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #d4d4d4; background-color: #1e1e1e; min-height: 14.0px }
p.p17 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px "PingFang SC"; color: #608b4e; background-color: #1e1e1e }
p.p18 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; background-color: #ffffff; min-height: 14.0px }
span.s1 { }
span.s2 { font: 12.0px "PingFang SC" }
span.s3 { }
span.s4 { font: 12.0px "PingFang SC" }
span.s5 { font: 12.0px Helvetica }
span.s6 { color: #c586c0 }
span.s7 { color: #d4d4d4 }
span.s8 { color: #ce9178 }
span.s9 { color: #9cdcfe }
span.s10 { color: #569cd6 }
span.s11 { color: #b5cea8 }
span.s12 { color: #608b4e }
span.s13 { font: 12.0px "PingFang SC" }
span.s14 { font: 12.0px Menlo }
span.s15 { color: #dcdcaa }
span.s16 { color: #4ec9b0 }
span.s17 { color: #808080 }
span.s18 { font: 12.0px "PingFang SC"; color: #608b4e }

?
 
 
 
 
react-native-swiper 解析
 
1.传递组件给swiper，作为swiper组件的children，
2.假如 有 4 张图片需要循环播放，那么传给swiper 4个 <Image /> （1、2、3、4）
   事实上swiper组件内会对其进行一次编辑 ： 4、1、2、3、4、1
3.依次正序、横向滑动，滑到4，然后滑到1，此时scrollview会马上更新contentOffSet（x: y:）
即滑到 1 的时候回马上更新 contentOffSetX 到 第一个1位置。 倒序滑动逻辑如同正序
 
 
另一种实现方案（OC上使用一切正常）
1.scrollview上放3个<Image />组件，默认显示中间的Image组件， 左右滑动到两边的边界x坐标（0，2*screenWidth）
马上更新contentOffSetX到 screenWidth（即还是中间的Image组件）同时更新图片
2.RN实现会有闪屏现象，因为渲染一个图片较慢，尤其是大图。
3.这种方式实现起来并不合适
 
 
 
模仿swiper简单实现循环播放scrollview
‘use strict‘
 
import React, { Component, PropTypes } from ‘React‘
import {
    AppRegistry,
    StyleSheet,
    View,
    ScrollView,
    Text
 
} from ‘react-native‘
 
export default class ImageLoopPlayer extends Component {
 
    constructor(props) {
        super(props)
 
        let total  = props.children ? props.children.length || 1 : 0
        let offSetX = props.children.length > props.defaultIndex ?
(props.defaultIndex + 1) * props.componentWidth : 0
 
        this.state = {
            ‘total‘:        total, 
            ‘offSetX‘:      offSetX,
            ‘currentIndex‘: props.defaultIndex,
}
}
 
    componentWillMount() {
        /**
* 组件第一次绘制之前调用。render前
* 可以更新state参数
*/
    
}
    
    componentDidMount() {
        /**
* 在组件第一次绘制后调用，通知组件以及加载完成。render 后
*/
}
 
 
    scrollviewDidScroll(e) {
        let setX = e.nativeEvent.contentOffset.x
        
        if (setX == 0) {
            this.setState({
                ‘offSetX‘: this.props.componentWidth * this.state.total
})
 
} else if (setX == this.props.componentWidth * (this.state.total + 1)) {
            this.setState({
                ‘offSetX‘: this.props.componentWidth
})
}
}
 
    scrollEndDrag(e) {
        let setX = e.nativeEvent.contentOffset.x
        this.setState({
            ‘offSetX‘: setX
})
}
 
    momentumScrollEnd(e) {
        let setX = e.nativeEvent.contentOffset.x; 
        //求出当前页数 
        let pageIndex = Math.floor(setX / this.props.componentWidth); 
       
        if (pageIndex == 0) {
            this.setState({
                ‘currentIndex‘:this.state.total-1
})
} else if (pageIndex == this.state.total+1) {
            this.setState({
                ‘currentIndex‘:0
})
} else {
            this.setState({
                ‘currentIndex‘:pageIndex - 1
})
}
}
 
 
    renderPageControl() {
        let pageArray = [];
        let colorStyle;
        
        for (let i = 0; i < this.state.total; i++) {
            colorStyle = (i == this.state.currentIndex) ? {color:‘red‘} : {color:‘white‘}
            pageArray.push(
                <Text key = {i} style = {[{fontSize:30}, colorStyle]}>
?
                </Text>
);
}
        return pageArray;
}
 
 
    render() {
 
        let pages = []
 
        if (this.state.total > 1) {
 
            /** children 可以理解为组件上面所有子组件 (如下：Text、Image就可理解为children)
* <View>
* <Text></Text>
* <Image></Image>
* </View>
*/
            // Object.keys() 返回对象的可列举属性或方法
            pages = Object.keys(this.props.children) // 0，1，2，3
            pages.unshift(this.state.total - 1 + ‘‘) // 首位插入 （total-1）===>>> 3，0，1，2，3 
            pages.push(‘0‘) // 末尾追加 ‘0‘ ===>>> 3，0，1，2，3，0
 
            pages = pages.map((page, i) => {
                return <View style={{width:  this.props.componentWidth,height: this.props.componentHeight}}
                             key={i}>
{this.props.children[page]}
                       </View>
})
}
        
 
        return (
            <View style = {{position: ‘relative‘, width: this.props.componentWidth,height: this.props.componentHeight}}>
                <ScrollView ref = ‘scrollView‘ 
                            backgroundColor = ‘black‘
                            contentContainerStyle = {{flexDirection:‘row‘,height:this.props.componentHeight}}
                            showsHorizontalScrollIndicator = {true}
                            horizontal={true} // 所有的的子视图会在水平方向上排成一行,默认值为false。
                            pagingEnabled = {true} 
                            keyboardDismissMode = {‘on-drag‘} // 当拖拽开始的时候隐藏软键盘
                            keyboardShouldPersistTaps = {false} // 当此属性为false的时候，点击焦点文本输入框以外的地方，键盘就会隐藏。
                            iosautomaticallyAdjustContentInsets = {false} // 与OC呼应，顶部莫名出现白色区域
                            contentOffset = {{x:this.state.offSetX, y:0}}
                            scrollsToTop = {false} // 点击状态栏滚动到顶部
                            scrollEventThrottle = {16} // 与 onScroll 方法搭配使用（系统提示建议16）
                           onScroll = {(e)=>this.scrollviewDidScroll(e)}
                            onScrollEndDrag = {(e) => this.scrollEndDrag(e)}
                            onMomentumScrollEnd = {(e)=>this.momentumScrollEnd(e)}>
{pages}
                 </ScrollView>
                 <View style={{position: ‘absolute‘,
                               bottom: 30,
                               left: 0,
                               right: 0,
                               flexDirection: ‘row‘,
                               flex: 1,
                               justifyContent: ‘center‘,
                               alignItems: ‘center‘,
                               backgroundColor: ‘black‘
}}>
{this.renderPageControl()}
                 </View>
            </View>
)
}
}
 
AppRegistry.registerComponent(‘ImageLoopPlayer‘, () => ImageLoopPlayer)

时间： 2024-11-05 16:07:02

React Native scrollview 循环播放的相关文章

iOS scrollview循环播放加缩放

前些日子一直在研究3d的框架没有时间写博客,不过最后需求改了,也没研究出个啥.这段时间出了新的需求,需要循环播放图片,并且滑动的时候中间的图片有缩放的效果.刚开始想在网上搜索,不过并没有找到合适的demo,没办法只能写个了. 首先说下思路,做这个效果需要解决三个问题. 第一个问题,如何控制每次滑动的距离.iOS中好像并没有设置scrollview每次滑动的距离吧.设置其画框的大小和pageenable的时候已经决定了其每次滑动的距离.但是需求要显示三张图片啊,中间大图,两边的图片只显示一部分.也

react native ScrollView

ScrollView是一个通用的可滚动的容器,你可以在其中放入多个组件和视图,而且这些组件并不需要是同类型的.ScrollView不仅可以垂直滚动,还能水平滚动(通过horizontal属性来设置). import React, { Component } from 'react'; import{ AppRegistry, ScrollView, Image, Text, View } from 'react-native' class IScrolledDownAndWhatHappened

React Native ScrollView 添加图片数组

"use strict" import React, { Component } from 'react';import { AppRegistry, // 注册组件,是应用的JS运行入口 StyleSheet, // 样式表, 类似于一个集合包含各个组件的属性 ScrollView, Dimensions, // 规格 Image, // 图片组件 View // 视图组件} from 'react-native'; // 当前设备屏幕的sizeconst { width, heig

React Native ScrollView缩放

"use strict" import React, { Component } from 'react';import { AppRegistry, // 注册组件,是应用的JS运行入口 StyleSheet, // 样式表, 类似于一个集合包含各个组件的属性 ScrollView, Dimensions, // 规格 TouchableWithoutFeedback, Image, // 图片组件 View // 视图组件} from 'react-native'; const {

scrollView循环播放器（一）

/** *  设置scrollView */ - (void)setUpScrollView:(NSArray *)array { UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:self.bounds]; scrollView.delegate = self; scrollView.pagingEnabled = YES; scrollView.showsHorizontalScrollIndicator = NO;

React Native组件之ScrollView

React Native组件ScrollView类似于iOS中的UIScrollView.其使用方法和属性如下: /** * Sample React Native App * https://github.com/facebook/react-native * 周少停 ScrollView 的常用属性 * 2016-09-19 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text,

React Native组件之ScrollView 和 StatusBar和TabBarIos

React Native中的组件ScrollView类似于iOS中的UIScrollView,其基本的使用方法和熟悉如下: /** * Sample React Native App * https://github.com/facebook/react-native * 周少停 ScrollView 的常用属性 * 2016-09-19 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet,

React&#160;Native&#160;中&#160;ScrollView&#160;性能探究

1 基本使用 ScrollView 是 React Native(后面简称:RN) 中最常见的组件之一.理解 ScrollView 的原理,有利于写出高性能的 RN 应用. ScrollView 的基本使用也非常简单,如下: ... 它和 View 组件一样,可以包含一个或者多个子组件.对子组件的布局可以是垂直或者水平的,通过属性 horizontal=true/false 来控制.甚至还默认支持"下拉"刷新操作.另外还有一个特别赞的特性,超出屏幕的 View 会自动被移除,从而节省资

React Native (一) react-native-video实现音乐播放器和进度条的功能

React Native (一) react-native-video实现音乐播放器和进度条的功能 功能: 1.卡片滑动切歌 2.显示进度条 效果图: 第三方组件: 1.react-native-video Github地址:https://github.com/react-native-community/react-native-video 2.react-native-animated-tabs Github地址:https://github.com/philipshurpik/react