React native 可拖动平面列表不呈现任何内容

我正在尝试为可拖动平面列表编写一个简单的代码。同样的代码对于FlatList运行得非常好。在下面的代码中，如果我用DragableFlatlist替换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 })}
    /> 
  )
};

this.state={
数据：[{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（）{
返回(
}
keyExtractor={item=>item.id}
滚动百分比={5}
onMoveEnd={（{data}）=>this.setState（{data}）}
/> 
)
};

TaskListTile.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>
            <View style={{flexDirection:'row'}}>
                <Text>Tasks completed: {completedTasks}/{totalTasks}</Text>
                <View style={{flex:1, alignItems:'flex-end'}}>

                    <ProgressBar progress={parseInt( this.props.displayData.completedTasks)/parseInt( this.props.displayData.totalTasks)} style={{height:8, width:90}}/>
                </View>
            </View>
        </View>
    );
}

const{id，name，completedTasks，totalTasks}=this.props.displayData；
返回(
{name}
已完成的任务：{completedTasks}/{totalTasks}
);
}

---

将extraData={this.state}传递给组件

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

}
keyExtractor={item=>item.id}
滚动百分比={5}
onMoveEnd={（{data}）=>this.setState（{data}）}
/> 

什么是

TaskListTile

？TaskListTile是我创建的一个组件，我需要为数据数组中的每个TaskList对象渲染。您能给我看一下

TaskListTile

屏幕吗？谢谢回复。我在上面的问题中添加TaskListTile的代码。它只是通过获取通过道具传递的数据来呈现磁贴。我还添加了当我使用FlatList时应用程序外观的屏幕截图。但是这停止了拖动功能