2019-02-22

1、在一个onScrollBeginDrag回调方法（ScrollView开始拖动开始时触发）中记录event.nativeEvent.contentOffset.y：Y轴滚动的偏移量。

2、在onScroll滚动事件回调方法中判断当前contentOffset.y与记录的Y轴滚动的偏移量：

（1）若记录的Y轴滚动的偏移量 < 当前contentOffset.y，则表示ScrollView在往下滚动。

（2）若记录的Y轴滚动的偏移量 > 当前contentOffset.y，则表示ScrollView在往上滚动。

'use strict';
import React, {Component} from 'react';
import {
    Text,
    View,
    ScrollView,
} from 'react-native';
const SCROLLVIEW_DIRECTION_UP = 0;     //表示ScrollView组件往上滚动
const SCROLLVIEW_DIRECTION_DOWN = 1;   //表示ScrollView组件往下滚动
 * 2019-02-22
 * chenlw
 * ScrollView判断滚动方向
export default class ScrollViewPanResponderExample_2 extends Component {
    scrollViewStartOffsetY = 0;         //用于记录手指开始滑动时ScrollView组件的Y轴偏移量，通过这个变量可以判断滚动方向
    scrollViewScrollDirection = 0;      //ScrollView组件滚动的方向：0往上；1往下
    static navigationOptions = ({navigation, screenProps}) => {
        return ({
            title: 'ScrollView判断滚动方向',
    constructor(props) {
        super(props);
        this.state = {
            scrollViewScrollDirection: '',   //ScrollView组件滚动的方向
     * 滑动开始回调事件
     * 注意：当刚刚开始滑动时，event.nativeEvent.contentOffset.y仍然是上次滑动的值，没有变化
     * @param event
     * @private
    _onScrollBeginDrag = (event) => {
        //event.nativeEvent.contentOffset.y表示Y轴滚动的偏移量
        const offsetY = event.nativeEvent.contentOffset.y;
        //记录ScrollView开始滚动的Y轴偏移量
        this.scrollViewStartOffsetY = offsetY;
     * ScrollView滑动回调事件
     * @param event
     * @private
    _onScroll = (event) => {
        const offsetY = event.nativeEvent.contentOffset.y;
        if (this.scrollViewStartOffsetY > offsetY) {
            //手势往下滑动，ScrollView组件往上滚动
            //console.log('手势往下滑动，ScrollView组件往上滚动');
            this.scrollViewScrollDirection = SCROLLVIEW_DIRECTION_UP;
            this.setState({
                scrollViewScrollDirection: 'ScrollView组件往上滚动'
        } else if (this.scrollViewStartOffsetY < offsetY) {
            //手势往上滑动，ScrollView组件往下滚动
            //console.log('手势往上滑动，ScrollView组件往下滚动');
            this.scrollViewScrollDirection = SCROLLVIEW_DIRECTION_DOWN;
            this.setState({
                scrollViewScrollDirection: 'ScrollView组件往下滚动'
     * 滑动停止回调事件
     * @param event
     * @private
    _onScrollEndDrag = (event) => {
        //console.log('_onScrollEndDrag');
        //console.log('Y=' + event.nativeEvent.contentOffset.y);
    render() {
        return (
                <Text>ScrollView滚动方向：{this.state.scrollViewScrollDirection}</Text>
                <ScrollView
                    onScroll={this._onScroll}
                    onScrollBeginDrag={this._onScrollBeginDrag}
                    onScrollEndDrag={this._onScrollEndDrag}
                    scrollEventThrottle={16}    //设置16，一帧回调一次这个onScroll方法
                    <Text style={{height: 30, backgroundColor: 'pink'}}>--------1111111---------</Text>
                    <Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
                    <Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
                    <Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
                    <Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
                    <Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
                    <Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
                    <Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
                    <Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
                    <Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
                    <Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
                    <Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
                    <Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
                    <Text style={{height: 100, backgroundColor: 'pink'}}>11111111</Text>
                </ScrollView>
            </View>
                    2019-02-22 1、在一个onScrollBeginDrag回调方法（ScrollView开始拖动开始时触发）中记录event.nativeEvent.contentOffset.y：Y轴滚动的偏移量。 2、在onScroll滚动事件回调方法中判断当前contentOffset.y与记录的Y轴滚动的偏移量：（1）若记录的Y轴滚动的偏移量 &amp;lt; 当前contentOff...
				
React Native Spring ScrollView！React Native Spring ScrollView V2是用于React Native的高性能跨平台原生ScrollView。（iOS和Android）很容易支持拉动刷新和拖动以加载更多数据。
React Native Spring ScrollView！React Native Spring ScrollView V2是用于React Native的高性能跨平台原生ScrollView。（iOS和Android）很容易支持拉动刷新和拖动以加载更多数据。
它是从V2中的Native桥接的，解决了Java语言线程卡住的问题，在V1中解决了一个大问题。
功能高性能的跨平台本机跳动ScrollView（iOS和Android）在水平和垂直方向上同时手势。
平滑滚动
				
React Native Spring ScrollView ！
 React Native Spring ScrollView V2是一个高性能的跨平台原生弹跳 ScrollView for React Native.(iOS & Android) 很容易支持拉动刷新和拖拽加载更多数据。 它是从V2中的Native桥接而来，解决了V1中Javascript线程卡死的一个大问题。
高性能跨平台原生弹跳ScrollView（iOS & Android）
 水平和垂直方向上的同时手势。
 平滑滚动
高度自定义的刷新和加载动画。 完全支持react-native-lottie 。 更流畅的动画。
 滚动到任意位置
水平和垂直方向上的原生 onScroll contentOffset
 支持初始化内容偏移。
 解决了在某些特殊情况下 onRefresh 和 onLoading 没有响应的问题
				
本文实例讲述了React Native中ScrollView组件轮播图与ListView渲染列表组件用法。分享给大家供大家参考，具体如下：
1、Scroll View
ScrollView是React Native提供的滚动视图组件，渲染一组视图，用户可以进行滑动响应交互，其常用属性如下：
滚动的偏移量：通过event.nativeEvent.contentOffset.x可以得到水平偏移量。
  horizontal={bool}，属性为true时，所有子视图在水平方向排列，否则在纵向排列。默认为false。
  pagingEnabled={bool}，属性为true时，滚动会停留在视图尺
				
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    //Selected index's color changed.
    static float newx = 0;
    static float oldIx = 0;
    newx= scrollView.contentOffset.x ;
				
ScrollView是RN中的一个滚动视图组件，它必须有一个确定的高度才能正常工作，因为在应用时往往会把将一系列不确定高度的子组件装进一个确定高度的容器。关于滚动视图高度这一点，不建议直接在样式中设置一个固定的height值(在目前最新版本中直接无效)，而是通过设置flex: 1以使其自动填充父容器的空余空间，但前提条件是所有的父容器本身也设置了flex或者指定了高度，否则就会导致无法正常滚动。
      <ScrollView
        showsHorizontalScrollIndicator={false} //不显示水平滚动条
        alwaysBounceHorizontal={true}
        horizontal={true} ...
				
MessageBox.js
import React, { useRef, useEffect, memo } from 'react'
import PropTypes from 'prop-types'
import { Spin } from 'antd'
import { isEmpty } from 'lodash'
import * as api from '../../api'
import MessageItemBox from './MessageItemBox'
import '../
//判断上下滚动方向）（deltaY小于0时，向下，向上则反之）
 bindscrollfx: function (e) {
  var scrollfx=e.detail.deltaY;
  if(scrollfx<0){
      console.log('位置','向左');
  }else{
   console.log('位置','向右');
左右方向判断稍作...
				
最近老大想接了个项目 想让我们 通过React Native 来实现 等技术成熟后 把我们自己的APP 也通过React Native 来实现 这样既可以实现跨平台 又可以 实现热更新。
所以，近期看了React Native 中文网 开始尝试着写一点小功能的东西试试
闲话少叙 今天先从 ScrollView 开始：
        1、ScrollView介绍：ScrollVi
				
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let point = scrollView.panGestureRecognizer.translation(in: self)
        if point.x &gt; 0 {
            //往右滚动
            directio...
```jsx
import React, { Component } from 'react';
import { View, Image, StyleSheet } from 'react-native';
import Carousel from 'react-native-looped-carousel';
const styles = StyleSheet.create({
  container: {
    flex: 1,
  image: {
    flex: 1,
    resizeMode: 'cover',
class BackgroundCarousel extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Carousel
          style={styles.container}
          autoplay={true}
          pageInfo={false}
          showsPageIndicator={false}
          swipe={false}
          isLooped={true}
          <Image
            style={styles.image}
            source={require('./img/image1.jpg')}
          <Image
            style={styles.image}
            source={require('./img/image2.jpg')}
          <Image
            style={styles.image}
            source={require('./img/image3.jpg')}
        </Carousel>
      </View>
export default BackgroundCarousel;
在上面的代码中，`Carousel` 组件的 `isLooped` 属性设置为 `true`，表示循环滚动。`autoplay` 属性设置为 `true`，表示自动播放。`pageInfo` 和 `showsPageIndicator` 属性都设置为 `false`，表示不显示页码信息和页码指示器。`swipe` 属性设置为 `false`，表示禁用手势滑动。每个页面的背景图片使用 `Image` 组件来展示，可以根据实际需求替换为其他组件或元素。