Code:

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',
        
    }
})

凯撒.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 https://snack.expo.dev/@gattu/autoscreoll

这是输出我want https://i.stack.imgur.com/B2UWM.jpg

我的输出

我正在尝试这样做，但风格并不完美。

如果活动索引点宽度与非活动索引不同，我希望这样，我给出上面的输出

当我尝试增加活动索引宽度但所有索引点宽度都会增加当我尝试减少宽度但所有索引宽度都减少时我该怎么做

我的错误在哪里有人可以帮助我吗？

您需要做的是根据所选索引设置一个更大宽度的样式。

所以基本上在里面carsar.js

                <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'
                        })
                        const selected = selectedIndex === i
                        return (
                            <Animated.View
                                key={i}
                                style={{ opacity, height: 10, width: selected ? 20 : 10, backgroundColor: '#009EFF', margin: 8, borderRadius: 5 }}
                            />
                        )
                    })}

                </View>

请注意，您必须执行在状态内选择索引的逻辑。

这不会创建动画，它只会改变宽度。您需要使用创建动画reanimated或react-native的动画库