react-native - 可拖动的平面列表不呈现任何内容

Question

我正在尝试为可拖动的平面列表编写一个简单的代码。对于 FlatList，相同的代码运行得非常好。在下面的代码中，如果我将 FlatList 替换为 DraggableFlatList，尽管从渲染组件“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 })}
    /> 
  )
};

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>
    );
}

使用 FlatList 的应用程序截图

Answer 1

将 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 })}
    />