Question

我正在尝试制作一个图像滑块，该滑块通过react native scrollview进行水平自动滚动，它返回错误_scrollView找不到错误。谁知道解决方案或更好的解决方案。是的，我必须手动在图像之间移动。我尝试向ScrollView中添加一个引用，但是该引用似乎给出了错误。

import React, { Component } from 'react'
import { Animated, View, StyleSheet, Image, Dimensions, ScrollView } from 'react-native'

const deviceWidth = Dimensions.get('window').width
const deviceHeight = Dimensions.get('window').height

const FIXED_BAR_WIDTH = 280
const BAR_SPACE = 10

const images = [
    require("../../assets/images/banner_1.jpg"),
    require("../../assets/images/banner2.jpg")
]

export default class ImgSlider extends Component {


    _scrollView = React.createRef();



    componentDidMount() {
        const numOfBackground = 2;
        let scrollValue = 0, scrolled = 0;
        setInterval(function () {
            scrolled++;
            if(scrolled < numOfBackground)
                scrollValue = scrollValue + deviceWidth;
            else{
                scrollValue = 0;
                scrolled = 0
            }
            _scrollView.scrollTo({ x: scrollValue, animated: false })
        }, 3000);
    }
  numItems = images.length
  itemWidth = (FIXED_BAR_WIDTH / this.numItems) - ((this.numItems - 1) * BAR_SPACE)
  animVal = new Animated.Value(0)

  render() {
    let imageArray = []
    let barArray = []
    images.forEach((image, i) => {
      console.log(image, i)
      const thisImage = (
        <Image
          key={`image${i}`}
          source={image}
          style={{ width: deviceWidth, height: 300 }}
        />
      )
      imageArray.push(thisImage)

      const scrollBarVal = this.animVal.interpolate({
        inputRange: [deviceWidth * (i - 1), deviceWidth * (i + 1)],
        outputRange: [-this.itemWidth, this.itemWidth],
        extrapolate: 'clamp',
      })

      const thisBar = (
        <View
          key={`bar${i}`}
          style={[
            styles.track,
            {
              width: this.itemWidth,
              marginLeft: i === 0 ? 0 : BAR_SPACE,
            },
          ]}
        >
          <Animated.View

            style={[
              styles.bar,
              {
                width: this.itemWidth,
                transform: [
                  { translateX: scrollBarVal },
                ],
              },
            ]}
          />
        </View>
      )
      barArray.push(thisBar)
    })

    return (
      <View
        style={styles.container}
        flex={1}
      >
        <ScrollView
          horizontal
          ref={this._scrollView}
          showsHorizontalScrollIndicator={false}
          scrollEventThrottle={10}
          pagingEnabled
        //   ref={(scrollView) => { _scrollView = scrollView }}
          onScroll={
            Animated.event(
              [{ nativeEvent: { contentOffset: { x: this.animVal } } }]
            )
          }
        >

          {imageArray}

        </ScrollView>
        <View
          style={styles.barContainer}
        >
          {barArray}
        </View>
      </View>
    )
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  barContainer: {
    position: 'absolute',
    zIndex: 2,
    top: 290,
    flexDirection: 'row',
  },
  track: {
    backgroundColor: '#ccc',
    overflow: 'hidden',
    height: 2,
  },
  bar: {
    backgroundColor: '#BB1E18',
    height: 2,
    position: 'absolute',
    left: 0,
    top: 0,
  },
})

Answer 1

this._scrollView没有滚动功能要尝试控制台记录什么初始化并查看其中发生了什么。

在本地响应中使ScrollView自动水平滚动时出错

1 个答案: