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

Question

我要制作一个待办事项应用程序。在主页面上，显示todolist的任务，我用的是scrollview，但是我想改成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

到平面列表
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

出于性能考虑，我建议在避免内联函数时使用变体。如果您想了解更多如何优化 React 原生 FlatList 性能：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}
  />
);

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

Change from ScrollView to FlatList in react native

javascript

scrollview