• Rn使用FlatList导航栏自动回到中间


    在这里插入图片描述

    import { useState, useRef } from 'react'
    import { FlatList, View, Text, StyleSheet, TouchableOpacity } from 'react-native'
    
    const Center = () => {
        const tabs = ["语文", "数学", "英语", "政治", "历史", "地理"]
        const [active, setActive] = useState(0)
        const flatRef = useRef()
    
        const activeTab = (index) => {
            setActive(index)
            flatRef.current.scrollToIndex({ viewPosition: 0.5, index: index, animated: true })
        }
    
        return (
            <>
                <View style={styles.nav}>
                    <FlatList data={tabs} ref={flatRef} horizontal showsHorizontalScrollIndicator={false}
                        renderItem={({ item, index }) => (
                            <TouchableOpacity key={index} onPress={() => activeTab(index)}
                                style={[
                                    styles.nav_item,
                                    active == index && styles.nav_item_active,
                                    tabs.length - 1 == index && styles.nav_item_last
                                ]}>
                                <Text style={active == index && styles.nav_item_active_text}>
                                    {item}
                                </Text>
                            </TouchableOpacity>
                        )}
                    />
                </View>
            </>
        )
    }
    
    const styles = StyleSheet.create({
        nav: {
            height: 45,
            flexDirection: "row",
            alignItems: "center",
            borderBottomColor: "#eee",
            borderBottomWidth: 1,
            paddingHorizontal: 10
        },
        nav_item: {
            paddingHorizontal: 20,
            paddingVertical: 4,
            borderColor: "#DADCE2",
            borderWidth: 1,
            borderRadius: 20,
            alignItems: "center",
            justifyContent: "center",
            marginRight: 10
        },
        nav_item_last: {
            marginRight: 0
        },
        nav_item_active: {
            backgroundColor: "#2C72FF",
            borderColor: "transparent",
        },
        nav_item_active_text: {
            color: "#ffffff"
        }
    })
    
    export default Center
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
  • 相关阅读:
    MySQL高可用之MHA集群
    学习Bootstrap 5的第十天
    PHP数组处理$arr1转换为$arr2
    【Mysql】调优-浅析Mysql的访问方式
    什么是阻塞队列?如何使⽤阻塞队列来实现⽣产者-消费者模型?哪个阻塞队列最常用?
    Javascript知识【JS变量和运算符】
    第十四章 网络管理实战3
    Flink Data Transformation
    第二证券|股票做短线要关注什么?
    C++ -- 特殊类设计
  • 原文地址:https://blog.csdn.net/AK852369/article/details/133748289