如何在第一次打开屏幕时滚动到 ScrollView 中的 image[x]？

Question

如何在第一次加载组件时滚动到ScrollView中的图像[x]？

我希望当我们打开此屏幕时，ScrollView 将滚动到第 4 个图像。

这是我的demo

export default function App() {
  const scrollX = useRef(new Animated.Value(0));
  const imageRef = createRef(scrollX);

  useEffect(() => {
    imageRef.current?.scrollTo(new Animated.Value(3));
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.scrollContainer}>
        <ScrollView
          ref={imageRef}
          horizontal={true}
          pagingEnabled
          showsHorizontalScrollIndicator={false}
          onScroll={Animated.event(
            [
              {
                nativeEvent: {
                  contentOffset: {
                    x: scrollX.current,
                  },
                },
              },
            ],
            { useNativeDriver: false }
          )}
          scrollEventThrottle={1}
        >
          {children}
        </ScrollView>
      </View>
    </SafeAreaView>
  );
}

Answer 1

scrollTo 接受单独的组件。您不需要使用动画组件和 onScroll 方法来响应滚动视图。只需在 scrollTo 中输入 {x: value, animated: true} 因为它接受 object

这是从 snack 更新的代码：

import React, { useRef, useEffect, createRef } from "react";
import {
  SafeAreaView,
  ScrollView,
  Text,
  StyleSheet,
  View,
  ImageBackground,
  Animated,
  Dimensions,
} from "react-native";

const images = new Array(6).fill(
  "https://images.unsplash.com/photo-1556740749-887f6717d7e4"
);

export const WIDTH = Dimensions.get("window").width;

export default function App() {
  const imageRef = useRef();

  useEffect(() => {
    imageRef.current?.scrollTo({x: WIDTH * 3});
  },[]);

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.scrollContainer}>
        <ScrollView
          ref={imageRef}
          horizontal={true}
          pagingEnabled
          showsHorizontalScrollIndicator={false}
        >
          {images.map((image, imageIndex) => {
            return (
              <View
                style={{
                  width: WIDTH,
                  height: 250,
                }}
                key={imageIndex}
              >
                <ImageBackground source={{ uri: image }} style={styles.card}>
                  <View style={styles.textContainer}>
                    <Text style={styles.infoText}>
                      {"Image - " + imageIndex}
                    </Text>
                  </View>
                </ImageBackground>
              </View>
            );
          })}
        </ScrollView>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  scrollContainer: {
    height: 300,
    alignItems: "center",
    justifyContent: "center",
  },
  card: {
    flex: 1,
    marginVertical: 4,
    marginHorizontal: 16,
    borderRadius: 5,
    overflow: "hidden",
    alignItems: "center",
    justifyContent: "center",
  },
  textContainer: {
    backgroundColor: "rgba(0,0,0, 0.7)",
    paddingHorizontal: 24,
    paddingVertical: 8,
    borderRadius: 5,
  },
  infoText: {
    color: "white",
    fontSize: 16,
    fontWeight: "bold",
  },
});

如何在第一次打开屏幕时滚动到 ScrollView 中的 image[x]？

How to scroll to image[x] in ScrollView at the first time open screen?

react-native

react-native-scrollview