在本机反应中从 ScrollView 更改为 FlatList

Question

I'm going to make a todolist app. On the main page, to show the task of todolist, I used scrollview, but I want to change it to FlatList.

 <ScrollView width = {width-20}> {Object.values(tasks).map(item => ( <Task key = {item.id} item={item} deleteTask={_deleteTask} toggleTask={_toggleTask} updateTask={_updateTask}/> ))} </ScrollView>

Answer 1

To Flatlist
More info here

<FlatList
     data={Object.values(tasks)}
     keyExtractor={(item)=>item?.id}
     renderItem={({item})=><Task key = {item.id} item={item} deleteTask={_deleteTask} toggleTask={_toggleTask} updateTask={_updateTask}/>}
     />

Answer 2

Because of performance, I recommend using the variation when we avoid inline functions. If you want to know more how to optimize React native FlatList performance: https://codingislove.com/optimize-react-native-flatlist-performance/

const renderItem = ({item})=><Task item={item} deleteTask={_deleteTask} toggleTask={_toggleTask} updateTask={_updateTask}/>;
const keyExtractor = (item) => item.id;

return (
  <Flatlist
   data={Object.values(tasks)}
   renderItem={renderItem}
   keyExtractor={keyExtractor}
  />
);