Question

我正在使用挂钩制作一个本机应用程序，但是我主要是在android中进行测试。

我的问题是：我有一个固定的列表，其中显示了文档选择器中的某些项目，当我选择其中一项不在顶部时，该列表会重新呈现并滚动到顶部。

我想要的是：选择一个项目并保持滚动条的位置。

组件状态：

const [files, setFiles] = useState([]);
const [selectedFiles, setSelectedFiles] = useState([]);
const [isEditEnabled, setIsEditEnabled] = useState(false);

状态：

文件->选择器中的文件
selectedFiles->要突出显示的文件
isEditEnabled->为true时，我可以一键选择

辅助功能：

const selectFile = file => {
  const isInSelectedFiles = selectedFiles.findIndex(
    selectedFile => selectedFile.name === file.name,
  );
  if (isInSelectedFiles === -1) {
    setSelectedFiles(oldSelectedFiles => oldSelectedFiles.concat(file));
  }
};

const handeThumbnailPress = file => {
  if (isEditEnabled) {
    selectFile(file);
  }
};

const handleThumbnailLongPress = file => {
  selectFile(file);
};

基本上，主要代码：

const FilesList = () => {
    return (
      <FlatList
        ref={flatListRef}
        onScroll={event => {
          scrollPosition.current = event.nativeEvent.contentOffset.y;
        }}
        scrollEventThrottle={16}
        data={files}
        extraData={selectedFiles}
        renderItem={({ item: file }) => {
          const isSelected =
            selectedFiles.findIndex(
              selectedFile => selectedFile.name === file.name,
            ) > -1;
          return (
            <DocumentThumbnail
              data={file}
              selected={isSelected}
              onPress={() => handeThumbnailPress(file)}
              onLongPress={() => handleThumbnailLongPress(file)}
            />
          );
        }}
        keyExtractor={(file, index) => `${file.name}-${index}`}
        onContentSizeChange={handleContentSizeChange}
      />
    );
  };

  return (
    <View style={styles.root}>
      <Grid style={styles.alignCenter}>
        <Row>{!files.length ? <Text>Item List!</Text> : <FilesList />}</Row>
      </Grid>
      <FloatingAction
        actions={floatingActions}
        onPressItem={handleFloatingActions}
      />
    </View>
  );

图像显示文件列表并滚动：

如何在本机列表中选择多个项目而不重置滚动位置？

0 个答案: