Блог

Я хотел сделать пользовательский индикатор из ScrollView, который является горизонтальным, я помещаю ссылки на каждый элемент моего списка, React.createRef() а затем на каждый элемент, который я просматриваю measureLayout из ссылки, а затем перевожу его в состояние, чтобы получить x, y, ширину

Но все мои ссылки равны нулю, несмотря на то, что я их назначил ..

 const data = [
    {
        key: 1,
        title: "Aujourd'hui",
        ref: React.createRef(),
    },
    {
        key: 2,
        title: 'Relations',
        ref: React.createRef(),
    },
    {
        key: 3,
        title: 'Créateurs',
        ref: React.createRef(),
    },
    {
        key: 4,
        title: 'Mots-clés',
        ref: React.createRef(),
    },
    {
        key: 5,
        title: 'Tendances',
        ref: React.createRef(),
    },
]

/** React.forwardRef Ref is equal to a ref scrollView and its not null **/

const Tab = React.forwardRef(({ item, isActive, index, openCategory, isOpen }, ref) => {
    return (
        <Category hitSlop={{ top: 10, left: 10, right: 10, bottom: 10 }} onPress={() => openCategory(index)} ref={ref}>
            <Label openFlux={isOpen} isActive={isActive}>
                {item.title}
            </Label>
        </Category>
    )
})

const Tabs = React.forwardRef(({ data, active, openCategory, isOpen }, ref) => {
    const [measures, setMeasures] = React.useState<any>([])

    const onItemPress = React.useCallback(
        (itemIndex: number) => {
            ref?.current?.scrollTo({
                x: measures[itemIndex].x,
                animated: true,
            })
        },
        [measures]
    )

    const onOpenCategory = (index: number) => {
        onItemPress(index)
        openCategory(index)
    }

    React.useEffect(() => {
        const m: any[] = []
        data.forEach((item) => {
            item.ref?.current?.measureLayout(ref?.current, (x, y, width, height) => {
                m.push({
                    x,
                    y,
                    width,
                    height,
                })

                if (m.length === data.length) {
                    setMeasures(m)
                }
            })
        })
    }, [])

    return (
        <ScrollView ref={ref} horizontal bounces={true} showsHorizontalScrollIndicator={false}>
            {data.map((item, index) => {
                return (
                    <Tab
                        key={item.key}
                        item={item}
                        isActive={active === index}
                        index={index}
                        isOpen={isOpen}
                        openCategory={() => onOpenCategory(index)}
                        ref={item.ref}
                    />
                )
            })}
            {measures.length > 0 amp;amp; <Indicator measures={measures} active={active} />}
        </ScrollView>
    )
})