代码：

App.js

import React from 'react'
import { Image, StyleSheet, TouchableOpacity, Text, View } from 'react-native'
import Carsar from './Carsar'

const dummyData =
    [{
        title: 'Get instant loans with approvals',
        uri: 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTWo3YRChZ3ADpZ7rEfQu1RvBOu9NMWZIMZBaH-a1CArXqx6nLX',//require('../img/1page.jpg'),
        id: 1

    },
    {
        title: 'Get money in wallet or bank account',
        uri: 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQN0NcV2epN147CiVfr_VAwsbU3VO8rJU0BPphfU9CEsVWa-kRX',//require('../img/1page.jpg'),
        id: 2
    },
    {
        title: 'Refer & earn exciting gifts',
        uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUbS4LNT8rnIRASXO6LGFSle7Mhy2bSLwnOeqDMivYTb2cgTJg',//require('../img/1page.jpg'),
        id: 3
    }]

const Home = () => {
    return (
        <View style={styles.contanier}>
            <Carsar data={dummyData} />
            <View style={styles.btnview}>
            <TouchableOpacity style={styles.btn}>
                <Text>Get Started</Text>
            </TouchableOpacity>
            </View>
        </View>
    )
}
export default Home;

const styles = StyleSheet.create({
    contanier: {
        flex: 1,
        backgroundColor: '#fff'
    },
    logo: {
        width: 70,
        height: 70,
        borderRadius: 50,
        marginLeft: 20,
        marginTop: 20

    },
    btnview:{
        alignItems:'center',
        justifyContent:'center',
        marginTop:20
    },
    btn: {
        width: 300,
        height: 50,
        borderRadius: 5,
        backgroundColor: '#009EFF',
        alignItems:'center',
        justifyContent:'center',
        
    }
})

Carsar.js

const { width, heigth } = Dimensions.get('window')

function infiniteScroll(dataList){
    const numberOfData = dataList.length
    let scrollValue = 0, scrolled = 0

    setInterval(function() {
        scrolled ++;
        if(scrolled < numberOfData)
        scrollValue = scrollValue + width

        else{
            scrollValue = 0
            scrolled = 0
        }

        this.flatList.scrollToOffset({ animated: true, offset: scrollValue})
        
    }, 3000)
}

const Carsar = ({ data }) => {
    const scrollX = new Animated.Value(0)
    let position = Animated.divide(scrollX, width)
    const [dataList, setDataList] = useState(data)

    useEffect(()=> {
        setDataList(data)
        infiniteScroll(dataList)
    })

    if (data && data.length) {
        return (
            <View>
                <FlatList data={data}
                ref = {(flatList) => {this.flatList = flatList}}
                    keyExtractor={(item, index) => 'key' + index}
                    horizontal
                    pagingEnabled
                    scrollEnabled
                    snapToAlignment="center"
                    scrollEventThrottle={16}
                    decelerationRate={"fast"}
                    showsHorizontalScrollIndicator={false}
                    renderItem={({ item }) => {
                        return <CarouselItem item={item} />
                    }}
                    onScroll={Animated.event(
                        [{ nativeEvent: { contentOffset: { x: scrollX } } }]
                    )}
                />

                <View style={styles.dotView}>
                    {data.map((_, i) => {
                        let opacity = position.interpolate({
                            inputRange: [i - 1, i, i + 1],
                            outputRange: [0.3, 1, 0.3],
                            extrapolate: 'clamp'
                        })
                        return (
                            <Animated.View
                                key={i}
                                style={{ opacity, height: 10, width: 10, backgroundColor: '#009EFF', margin: 8, borderRadius: 5 }}
                            />
                        )
                    })}

                </View>
            </View>
        )
    }

    console.log('Please provide Images')
    return null
}

const styles = StyleSheet.create({
    dotView: { flexDirection: 'row', justifyContent: 'center',marginBottom:10}
})

export default Carsar

这里是完整code
这里是输出I want

我的输出

我正在试着做，但是样式不太合适。
如果活动索引的点宽与非活动索引的点宽不同，我希望这样，我给予上面的输出
当我试图增加活动索引宽度，但所有索引点宽度增加时，当我试图减少宽度，但所有索引宽度减少时，我该怎么做
我错在哪里有人能帮我吗？