Question

我想在一份清单中专门提及一个项目。我现在宣读并研究各种例子,但没有任何效果。难道有人要告诉我如何工作? !

const Screen = ({id, data}) => {
    const [y, setY] = useState(null);
    const scrollViewRef = useRef(null);

    useEffect(() => {
        if (data.length > 0 && id && y) {
            if (scrollViewRef.current && scrollViewRef.current !== null) {
                const index = data.findIndex(item => {
                    return item._id === id
                });
                if (index >= 0) {
                     scrollViewRef.current.scrollTo({
                     y: data.length * index, animated: true
                });
            }
        }
     }
    }, [data, id, y]);


   return (
       <ScrollView  ref={scrollViewRef>
           {data.length > 0 && data.map((item, key) => {
               return (
                   <View
                       key={key}
                       style={{height: 250, backgroundColor: colors.green, margin: 20}}
                       onLayout={(event) => {
                           const layout = event.nativeEvent.layout;
                           setY(layout.y)
                       }}>
                       <Text >{data.name}</Text>
                   </View>
               )
           })}
       </ScrollView>
   ) 
};

Answer 1

下面是迅速的解决办法:

const sampleList = Array.from({ length: 30 }, (_, index) => ({
  _id: `${index}`,
  name: `name ${index}`,
}));

const itemMargin = 20;

const ScrollToIndex = ({ data = sampleList }) => {
  const [id, setActiveId] = useState("5");
  const [scrollHeight, setScrollHeight] = useState(null);
  const scrollViewRef = useRef(null);

  useEffect(() => {
    if (id && scrollHeight) {
      const index = data.findIndex((item) => item._id === id);

      if (index !== -1) {
        scrollViewRef.current.scrollTo({
          y: scrollHeight * index,
          animated: true,
        });
      }
    }
  }, [data, id, scrollHeight]);

  const onLayout = ({ nativeEvent: { layout: { y } } }) => {
    setScrollHeight(y - itemMargin);
  };

  return (
    <ScrollView ref={scrollViewRef}>
      {data.map((item, index) => (
        <View
          key={index}
          style={{ height: 250, backgroundColor: colors.green, margin: itemMargin }}
          onLayout={index === 1 && onLayout}
          onTouchEnd={() => {
            setActiveId(item._id);
          }}
        >
          <Text>{item.name}</Text>
        </View>
      ))}
    </ScrollView>
  );
};

举例来说,重新招标是由设定的。倍于数据阵列的长度。如果你想要储存所有部件的布局信息,可以通过将这些信息储存在一个阵列中来实现,最好是利用使用国与使用国的组合,而不是使用国。

In general, React suggest that useEffect might not be the best practice for these situations.

口粮可能trick,需要与停电结合使用。如果项目高度固定,则只剩下一个排位,直到陈列架上。

const scrollHeight = 250 + 20 * 2;

const ScrollToIndex = ({ data = sampleList }) => {
  const [id, setActiveId] = useState("5");
  const [isMounted, setIsMounted] = useState(null);
  const scrollViewRef = useRef(null);

  useEffect(() => {
    if (id && isMounted) {
      // the same as above
    }
  }, [data, id, isMounted]);

  const onLayout = () => {
    if(!isMounted) setIsMounted(true);
  };

  return (
    <ScrollView ref={scrollViewRef} onLayout={onLayout}>
      {data.map((item, index) => (
        <View
        // with key style and onTouchEnd as above without onLayout         
        >
          <Text>{item.name}</Text>
        </View>
      ))}
    </ScrollView>
  );
};

友情链接