Question

我正在尝试为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 })}
    /> 
  )
};

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

Screenshot of app using 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 })}
    />

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

1 个答案: