请问为什么代码所有的ScrollTo功能都用不了?在模拟和真机都不行,没有移动

Question

useEffect(() => {
setTimeout(() => {
flatListRef.current.scrollToIndex({
index: 5,
viewPosition: 0,
animated: true,
});
// flatListRef.current.scrollToItem({item:5, viewPosition: 0.5, animated: true});
// flatListRef.current.scrollToOffset({ offset:200, });
// flatListRef.current.scrollToEnd({animated: true});
}, 2000);
}, []);
请问为什么代码所有的ScrollTo功能都用不了?在模拟和真机都不行,没有移动

Answer 1

FE大公爵 2023-03-09 21:45:49

api是肯定可以的，肯定是哪里没写全。你删掉不相关代码，然后把整个文件的代码全贴出来，如果格式不好弄就截图。

• 提问者 cpen5 #1

  连FlatList本身也滚动不了
  import {StyleSheet, Text, View, FlatList} from 'react-native';
  import React, {useEffect, useRef} from 'react';
  
  const data = [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
    23,
  ];
  
  export default () => {
    const flatListRef = useRef();
  
    useEffect(() => {
      setTimeout(() => {
        flatListRef.current?.scrollToIndex({
          index: 5,
          viewPosition: 0.5,
          animated: true,
        });
        // flatListRef.current.scrollToItem({item:5, viewPosition: 0.5, animated: true});
        // flatListRef.current.scrollToOffset({ offset:200, });
        // flatListRef.current.scrollToEnd({animated: true});
      }, 2000);
    }, []);
    const renderItem = ({item, index}) => {
      return <Text style={styles.txt}>{`List item ${item}`}</Text>;
    };
    const renderItem2 = ({item, index}) => {
      return <Text style={styles.txt2}>{`List item ${item}`}</Text>;
    };

• 提问者 cpen5 #2

  const ListHeader = (
      <View style={styles.header}>
        <Text style={styles.extraTxt}>List Header</Text>
      </View>
    );
  
    const ListFooter = (
      <View style={[styles.header, styles.footer]}>
        <Text style={styles.extraTxt}>List Footer</Text>
      </View>
    );
    const ListEmpty = (
      <View style={styles.listEmpty}>
        <Text style={styles.extraTxt}>no data</Text>
      </View>
    );

• 提问者 cpen5 #3

  return (
      <FlatList
        ref={flatListRef}
        style={styles.flatlist}
        data={data}
        renderItem={renderItem}
        keyExtractor={(_, index) => `item-${index}`}
        contentContainerStyle={styles.containerStyle}
        // showsVerticalScrollIndicator={false}
        // onScroll={event => {
        //   console.log(event.nativeEvent.contentOffset.y);
        // }}
        // keyboardDismissMode="on-drag"
        // keyboardShouldPersistTaps="handled"
        ListHeaderComponent={ListHeader}
        ListFooterComponent={ListFooter}
        ListEmptyComponent={ListEmpty}
        ItemSeparatorComponent={<View style={styles.separator} />}
        // initialNumToRender={15}
        inverted={false}
        numColumns={1}
        // onViewableItemsChanged={info => {
        //   const {viewableItems} = info;
        // }}
      />
  
      // <FlatList
      //   style={styles.flatlist}
      //   data={data}
      //   renderItem={renderItem2}
      //   keyExtractor={(_, index) => `item-${index}`}
      //   horizontal={true}
      //   showsHorizontalScrollIndicator={false}
      // />
    );
  };

点开查看后面3条评论