Scrollview滚动单个滚动视图时滚动两个条

Question

我使用pageingEnabled在单个页面中进行了多个滚动视图。还为它们每个添加了滚动条指示器。但是，当滚动单个滚动视图时，所有滚动条都会更改。我不知道如何为每个滚动视图唯一地指定它们。

滚动视图已将图像设置为图像轮播。已使用react-native-snap-carousel。但是在Android上无法正确触发图片点击。因此，请考虑使用滚动视图制作自己的旋转木马，因为图像阵列将始终小于5。

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

const deviceWidth = Dimensions.get('window').width
const BAR_SPACE = 5;

const images = [
    'https://s-media-cache-ak0.pinimg.com/originals/ee/51/39/ee5139157407967591081ee04723259a.png',
    'https://s-media-cache-ak0.pinimg.com/originals/40/4f/83/404f83e93175630e77bc29b3fe727cbe.jpg',
    'https://s-media-cache-ak0.pinimg.com/originals/8d/1a/da/8d1adab145a2d606c85e339873b9bb0e.jpg',
    'https://s-media-cache-ak0.pinimg.com/originals/8d/1a/da/8d1adab145a2d606c85e339873b9bb0e.jpg',
]

export default class App extends Component {

    numItems = images.length;
    animVal1 = new Animated.Value(0);

    render() {
        let imageArray = [];
        let barArray = [];
        images.forEach((image, i) => {
            console.log(image, i);
            const thisImage = (
                <Image
                    key={`image${i}`}
                    source={{uri: image}}
                    style={{ width: deviceWidth-20, height: 200, resizeMode: 'cover' }}
                />
            );
            imageArray.push(thisImage);

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

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

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

        return (
            <View>
                <View
                    style={styles.container}
                >
                    <ScrollView
                        style={{height: 200, marginTop: 20, width: deviceWidth-20, borderRadius: 10}}
                        horizontal
                        showsHorizontalScrollIndicator={false}
                        // scrollEventThrottle={10}
                        pagingEnabled
                        onScroll={
                            Animated.event(
                                [{ nativeEvent: { contentOffset: { x: this.animVal1 } } }]
                            )
                        }
                    >
                        {imageArray}
                    </ScrollView>
                    <View
                        style={styles.barContainer}
                    >
                        {barArray}
                    </View>
                </View>

                <View
                    style={styles.container}
                >
                    <ScrollView
                        style={{height: 200, marginTop: 20, width: deviceWidth-20, borderRadius: 10}}
                        horizontal
                        showsHorizontalScrollIndicator={false}
                        // scrollEventThrottle={10}
                        pagingEnabled
                        onScroll={
                            Animated.event(
                                [{ nativeEvent: { contentOffset: { x: this.animVal1 } } }]
                            )
                        }
                    >
                        {imageArray}
                    </ScrollView>
                    <View
                        style={styles.barContainer}
                    >
                        {barArray}
                    </View>
                </View></View>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
    },
    barContainer: {
        position: 'absolute',
        zIndex: 2,
        bottom: 10,
        flexDirection: 'row',
    },
    track: {
        backgroundColor: '#ccc',
        overflow: 'hidden',
        height: 5,
        width: 5,
        borderRadius: 5,
    },
    bar: {
        backgroundColor: '#5294d6',
        height: 5,
        width: 5,
        borderRadius: 5,
        position: 'absolute',
        left: 0,
        top: 0,
    },
})