Question

我是 react-native 的新手，最近我在多选问题上苦苦挣扎，并在平面列表中突出显示了我的项目，有人能帮我吗！ :D

export default function opzioni( {navigation} ){
  
  const renderItem = ({item}) => (
      <TouchableOpacity style={item.stile} onPress={() => selectItem(item)}>
          <Text>{item.titolo}</Text>
      </TouchableOpacity>
  )

  const selectItem = (item) => {
      item.isSelect = !item.isSelect;
      item.stile = item.isSelect ? styles.itemSelected : styles.item;
     
  }



  return(
      <SafeAreaView style={styles.containerUtente}>
          <ScrollView>
          <Text>SELEZIONA COSA ELIMINARE:</Text>

          <FlatList
          numColumns={4}
          data={data}
          renderItem={renderItem}
          keyExtractor={item => item.id.toString()}
          extraData={data}
       />

         </ScrollView>
      </SafeAreaView>
  )
}

数据是这样的，我有一个带有标题的对象要显示在平面列表中，一个id要在平面列表中给出，isSelect用于选择或取消选择项目，最后是一个用于以不同的方式重新渲染项目的阶梯彩色背景

{
        titolo: "no alcol",
        id: 1,
        isSelect: false,
        stile: styles.item
    }

Answer 1

创建一个状态并将数据存储在其中......然后在FlatList中使用它......你的选择功能也错了

Working Example

这样写

export default function opzioni({ navigation }) {
  const [Data, SetData] = React.useState(data);

  const renderItem = ({ item }) => (
    <TouchableOpacity
      onPress={() => selectItem(item.id)}
      style={item.isSelect ? styles.itemSelected : styles.item}>
      <Text>{item.titolo}</Text>
    </TouchableOpacity>
  );

  const selectItem = (id) => {
    let temp = [...Data];
    for (let i = 0; i < temp.length; i++) {
      if (temp[i].id === id) {
        temp[i].isSelect = temp[i].isSelect ? false : true;
        break;
      }
    }
    SetData(temp);
  };

  return (
    <SafeAreaView style={styles.containerUtente}>
      <ScrollView>
        <Text>SELEZIONA COSA ELIMINARE:</Text>

        <FlatList
          numColumns={4}
          data={Data}
          renderItem={renderItem}
          keyExtractor={(item) => item.id.toString()}
        />
      </ScrollView>
    </SafeAreaView>
  );
}

Flatlist 不会在多选中重新渲染我的项目

1 个答案: