Javascript 在React native中使用scrollview同步carrousel图像时出现问题

在React Native中使用此实现将文本和carrousel图像与scrollview同步时，我遇到了许多问题。我尝试了很多方法来解决这个问题，比如setTimeout和contentOffset

问题是第一次渲染没有调用scrollTo，这会使显示的文本和图像不同步

我在React Native中发现了这个问题，但我无法从中提取解决方案。有人能帮我吗

import * as React from "react";
import { View, Text,ScrollView, useWindowDimensions } from "react-native";

const data = [
  {
      color: 'red'
  },
  {
      color: 'blue'
  },
  {
      color: 'black'
  },
  {
      color: 'green'
  }
]

export default function App() {

  const scrollViewRef = React.useRef();
  const { width } = useWindowDimensions();
  const [index, setIndex] = React.useState(0);

  const offsetContent = (offset) => {
      scrollViewRef.current.scrollTo({ x: offset, animated: false });
  };

  const autoScroll = () => {
    const size = data.length - 1;
    setIndex(size === index ? 0 : index + 1);

    const offset = width * index;

    offsetContent(offset);

    console.log(`${size} ${index} ${offset}`);
  };


  React.useEffect(() => {
    const timer = setTimeout(autoScroll, 3000);

    return () => clearTimeout(timer);
  });

  return (
    <View
      style={{
        justifyContent: "center",
        alignItems: "center",
      }}
    >

      <ScrollView
        ref={scrollViewRef}
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={{ height: width / 1.5 }}
        pagingEnabled
        contentOffset={{ x: 380, y: 0 }}
      >
        {data.map((item) => (
          <View key={item.color} style={{width, height: 280, backgroundColor: item.color}} />
        ))}
      </ScrollView>


      <Text>{data[index].color}</Text>
    </View>
  );
}

import*as React from“React”；
从“react native”导入{View、Text、ScrollView、useWindowDimensions}；
常数数据=[
{
颜色：“红色”
},
{
颜色：“蓝色”
},
{
颜色：“黑色”
},
{
颜色：“绿色”
}
]
导出默认函数App（）{
const scrollViewRef=React.useRef（）；
const{width}=useWindowDimensions（）；
const[index，setIndex]=React.useState（0）；
常量偏移量content=（偏移量）=>{
scrollViewRef.current.scrollTo（{x:offset，动画：false}）；
};
常量autoScroll=（）=>{
常量大小=data.length-1；
setIndex（大小===索引？0:索引+1）；
常数偏移=宽度*索引；
offsetContent（offset）；
log（`${size}${index}${offset}`）；
};
React.useffect（（）=>{
常量计时器=设置超时（autoScroll，3000）；
return（）=>clearTimeout（计时器）；
});
返回(
{data.map（（项）=>(
))}
{data[index].color}
);
}

看

const autoScroll = () => {
    const size = data.length - 1;
    setIndex(size === index ? 0 : index + 1);

    const offset = width * index;

    offsetContent(offset);
    // Here you calculate offset based on index..
    // When you increase index and update the state, you need another hook do detect when this index is updated and then calculate an offset.
}


// Add this hook and calculate an offset here and call offsetContent function.
React.useEffect(() => {
    const offset = width * index;

    offsetContent(offset);
}, [index]);

---

在第一次超时时，您更新了索引，并认为它是1，但实际上，当您计算偏移量时，它又是0，这就是为什么滚动未更改的原因。

工作在这里，您太棒了。谢谢。祝你好运