React Native: почему этот крючок useRef не выполняет автоматическую прокрутку - PullRequest
Новая
       26

React Native: почему этот крючок useRef не выполняет автоматическую прокрутку

0 голосов
/ 17 апреля 2020

Я пытаюсь выполнить автоматическую прокрутку между четырьмя изображениями, используя ловушку useRef, которая идентифицирует цель с использованием значения состояния, называемого «выбранным».

Я получаю неожиданное поведение, так как автоматическая прокрутка имеет ошибочные значения c, обычно пропуская третье изображение, к которому следует прокрутить. 

const [selected, setSelected] = useState(0);
const scrollRef = useRef(null);

const setSelectedIndex = e => {
    const viewSize = e.nativeEvent.layoutMeasurement.width;
    const contentOffset = e.nativeEvent.contentOffset.x;
    const selectedIndex = Math.floor(contentOffset / viewSize);
    setSelected(selectedIndex);
}

useEffect(() => {
    setInterval(() => {
        setSelected(prev => prev + 1);
        scrollRef.current.scrollTo({
            animated: true,
            y: 0,
            x: DEVICE_WIDTH * selected
        });
    }, 10000);
}, [selected]);

return (
    <View style={{ height: '100%', width: '100%' }}>
        <ScrollView
            horizontal
            pagingEnabled
            onMomentumScrollEnd={setSelectedIndex}
            ref={scrollRef}
        >
            {images.map(image => (
                <Image
                    key={image}
                    source={image}
                    style={styles.backgroundImage}
                />
            ))}
        </ScrollView>
        <View style={styles.circleDiv}>
            {
                images.map((img, i) => (
                    <View
                        key={img}
                        style={[styles.whiteCircle, { opacity: i === selected ? 0.5 : 1 }]}
                    />
                ))
            }
        </View>
    </View>
);

Если это поможет, я построил его с помощью componentDidMount, который работает, как и ожидалось. 

scrollRef = createRef();

componentDidMount = () => {
    setInterval(() => {
        this.setState({
            prev => ({ selected: prev.selected + 1 }),
            () => {
                this.scrollRef.current.scrollTo({
                    animated: true,
                    y: 0,
                    x: DEVICE_WIDTH * this.state.selected
                });
            }
            });
}, 5000);
    }
...