标签: react-native-draggable-flatlist

在过去的几个月里，我一直在努力实现一个要求，即我在单个滚动视图中有一个可拖动的平面列表和一个平面列表，我应该能够滚动整个内容。

可拖动的平面列表也应该具有自动滚动功能，这意味着当列表太长而我试图将其拖出视口时，除非我将其放下，否则列表应自动滚动。

我知道这个要求非常棘手，但我没有得到任何让它完全工作的线索。

我正在使用以下代码，并且为此目的使用了“react-native-draggable-flatlist”（https://github.com/computerjazz/react-native-draggable-flatlist）。

代码：

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TouchableOpacity
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import DraggableFlatList from 'react-native-draggable-flatlist'
import { Component } from 'react'

const exampleData = [...Array(20)].map((d, index) => ({
  key: `item-${index}`, // For example only -- don't use index as your key!
  label: index,
  backgroundColor: `rgb(${Math.floor(Math.random() * 255)}, ${index *
  5}, ${132})`
}));

class App extends Component {
  state …

我有一个 React Native FlatList，带有一个带有 2 个内部文本的 ListHeaderComponent。结构是：

• 标头
  • 第 1 部分 - 非粘性
  • 第 2 部分 - 粘性
• 列出项目

这意味着当列表向上滚动时，第 1 部分应该消失（非粘性），而第 2 部分应该保留在列表顶部（粘性）。

这是代码：

<FlatList
  data={ items }
  renderItem={ renderItem }
  ListHeaderComponent={
     <View>
         <Text>Section 1</Text>
         <Text>Section 2</Text>
     </View>
  }
  stickyHeaderIndices={[0]}
/>

我必须将索引设置为 [0]，以便它选择标题，但无法选择标题中的第二个。有任何想法吗？

顺便说一句 - 我想在列表滚动时捕获垂直偏移，然后放在 HeaderComponent main <View style={{marginTop: -offset }}> 上，以便模拟滚动。但我的理解是Android不支持负边距。

BTW-2 - 我正在使用react-native-draggable-flatlist，所以我不想将文本放入列表本身，因为这会使列表项的逻辑变得复杂。谢谢！

我正在尝试为draggable-flatlist 编写一个简单的代码。同样的代码对于 FlatList 运行得非常好。在下面的代码中，如果我用 DraggableFlatList 替换 FlatList，虽然从呈现的组件“TaskListTile”显示日志，但我没有在屏幕上看到任何内容

  this.state = {
    data: [{key: '0',id:'0', name: 'Tasklist1', totalTasks: '10', completedTasks: '9'},
    {key: '1',id:'1', name: 'Tasklist2', totalTasks: '12', completedTasks: '9'},
    {key: '2',id:'2', name: 'Tasklist3', totalTasks: '50', completedTasks: '1'}
  ]

  }
}


render(){
  return (

    <FlatList
      data={this.state.data}
      renderItem= {({item}) =><TaskListTile displayData={item}/>}
      keyExtractor={item => item.id}
      scrollPercent={5}
      onMoveEnd={({ data }) => this.setState({ data })}
    /> 
  )
};

任务列表Tile.js

    const {id, name, completedTasks, totalTasks} = this.props.displayData;

    return (
        <View key={id} style={{backgroundColor:'#d6eef8', borderColor:'#00CCFF', borderWidth:1,margin:10,padding:10, borderRadius:5}}>
            <Text style={{color:'#00CCFF', fontSize:20}}>{name}</Text> …

我正在努力为我的 React-Native 应用程序创建一个要求，其中我有一个空白的保管箱（在放置平面列表项目时，它应该转换为可拖动的平面列表）和一个可拖动的平面列表，我必须将其拖放到空白处保管箱，反之亦然。

两个平面列表中的项目应该有一个单击的右侧菜单，其中应该显示一个选项，用于将项目移动到另一个平面列表。

我知道这是一个非常常见的场景，但由于我对 React-Native 还很陌生，所以我正在努力获取任何库或自己创建相同的库。

我正在将 React-Native 与 Redux 和 Typescript 结合使用

我正在使用react-native-draggable-flatlist作为Flatlist（https://github.com/computerjazz/react-native-draggable-flatlist），请告诉我是否有更好的选择