NestableDraggableFlatList无法滚动问题求助

• 将React Native升级至最新版本，并同步把react-native-draggable-flatlist升级到4.0.1、react-native-reanimated升级到3.6.2后，NestableDraggableFlatList内部无法滚动。当用户创建大量子任务导致内容铺满屏幕时，无法上下滚动，严重影响使用体验。
• 该功能在react-native-draggable-flatlist3.1.2版本下运行正常。

依赖版本

"react-native-reanimated": "3.6.2",
"react-native-gesture-handler": "2.15.0"

实现代码（Subtasks组件） #

const renderItem = ({ item, drag, isActive }: RenderItemParams<SubTaskItemModel>) => (
  <>
    <SubTaskItem
      key={item.id}
      selected={item.taskDone}
      doneTime={item.taskDoneTime ? new Date(item.taskDoneTime) : undefined}
      doneBy={
        item.taskDoneBy
          ? teamMembers.find((user) => user.id === item.taskDoneBy)?.attributes.name
          : undefined
      }
      onSelectedChange={onSelectedChange(item)}
      value={item.value}
      onChangeValue={onChangeValue(item)}
      focus={item.focus}
      onNext={onNext(item)}
      onDelete={onDelete(item)}
      onBlur={onBlur(item)}
      drag={drag}
      isActive={isActive}
      editMode={editMode}
      addingMode={addingMode}
    />
    <Separator />
  </>
);

return (
    <NestableScrollContainer>
      <NestableDraggableFlatList
        data={state}
        keyExtractor={(item) => String(item.id)}
        renderItem={renderItem}
        activationDistance={1}
        onDragEnd={({ data }) => {
        dispatch(SetTasksState(data));
        onOrderTasks && onOrderTasks(data);
        }}
      />
    {editMode && showAddButton && <SubTaskItem button onClick={() => dispatch(AddNewTask())} />}
  </NestableScrollContainer>
);

SubTaskItem组件代码 #

function SubTaskItem({
  editMode,
  addingMode,
  button,
  onClick,
  onDelete,
  focus,
  selected,
  onSelectedChange,
  value,
  onChangeValue,
  onNext,
  onBlur,
  drag,
  doneTime,
  doneBy,
  isActive,
}: SubTaskItemProps) {
  const { t } = useTranslation();
  const textInputRef = useRef(null);

  useEffect(() => {
    if (focus) {
      (textInputRef.current as any).focus();
    }
  }, [focus]);

  const deleteOnBackspace = useCallback(
    ({ nativeEvent }) => {
      if (nativeEvent?.key === 'Backspace' && value?.length === 0) {
        onDelete && onDelete();
      }
    },
    [value, onDelete]
  );

  const renderDeleteAction = (x: number, progress: Animated.AnimatedInterpolation<number>) => {
    const trans = progress.interpolate({
      inputRange: [0, 1],
      outputRange: [x, 0],
    });

    return (
      <Animated.View style={{ flex: 1, transform: [{ translateX: trans }] }}>
        <DeleteButton onPress={onDelete}>
          <Icon icon={faTrashCan} size="medium" color={themeColors.subtasks.deleteIcon} />
        </DeleteButton>
      </Animated.View>
    );
  };

  const renderRightActions = (
    progress: Animated.AnimatedInterpolation<number>,
    _dragAnimatedValue: Animated.AnimatedInterpolation<number>
  ) => <RightActionContainer>{renderDeleteAction(64, progress)}</RightActionContainer>;

  if (button) {
    return (
      <Button onPress={onClick}>
        <RadioButtonContainer>
          <RadioButton disabled />
        </RadioButtonContainer>
        <Txt type={TxtType.paragraph} style={{ color: themeColors.task.subTasks.addNew }}>
          {t('Task.Subtasks.addNew')}
        </Txt>
      </Button>
    );
  }
  const swipeable = (
    <Swipeable
      friction={2}
      rightThreshold={editMode ? 60 : 0}
      renderRightActions={editMode && renderRightActions}
    >
      <Container>
        <RadioButtonContainer>
          <RadioButton
            selected={selected}
            disabled={!editMode || addingMode}
            onSelect={onSelectedChange}
          />
        </RadioButtonContainer>
        <SubtaskTextContainer>
          <TextInput
            ref={textInputRef}
            onChangeText={(text) => onChangeValue?.(text)}
            onBlur={onBlur}
            value={value}
            editable={editMode && !selected}
            returnKeyType="next"
            onSubmitEditing={onNext}
            enablesReturnKeyAutomatically
            onKeyPress={deleteOnBackspace}
          />
          {selected && doneBy && doneTime && (
            <SubtaskDoneDescription>
              {t('Task.Subtasks.doneBy', {
                author: doneBy,
                date: `${doneTime?.toLocaleString('default', {
                  month: 'short',
                })} ${doneTime?.getDate()}`,
              })}
            </SubtaskDoneDescription>
          )}
        </SubtaskTextContainer>
        {editMode && (
          <TouchableOpacity onLongPress={drag} disabled={isActive}>
            <Icon icon={faBars} size="medium" color={themeColors.subtasks.moveIcon} />
          </TouchableOpacity>
        )}
      </Container>
    </Swipeable>
  );

  return <ScaleDecorator activeScale={1.04}>{swipeable}</ScaleDecorator>;
}

主视图代码 #

<GestureHandlerRootView testID="EditTaskView-screen">
    <NavigationHeader
        iconLeft={faClipboardCheck as IconProp}
        title="Task.title"
        onClose={onGoBack}
        actionSheetOptions={editTaskOptions}
    />
    <Content // styled-component -> scrollView
        ref={scrollViewRef}
        contentContainerStyle={{ paddingBottom: 30 }}
        keyboardShouldPersistTaps="handled"
    >
        <Tile>
            <TaskHeader
                editable
                hasAccess={canUserMakeChanges}
                name={title}
                onChange={setTitle}
                save={save}
            />
        </Tile>

        <Subtasks
            editMode={canUserMakeChanges}
            key={sectionId}
            initialValues={subTasks}
            onChangeTaskText={onChangeTaskText}
            onChangeTaskCheckmark={onChangeTaskCheckmark}
            onOrderTasks={onOrderTasks}
            onDeleteTask={onDeleteTask}
            scrollView={scrollViewRef}
        />
</Content>
</GestureHandlerRootView>

内容的提问来源于stack exchange，提问作者konradns