如何更改 FlatList 行的背景颜色？

无所不知

我正在学习 React-Native 中的列表，但我似乎无法让我的代码工作。当按下该行内的按钮时，我想更改 FlatList 中特定行的背景颜色。我在网上找到了一些答案，但其中大部分对我来说很复杂，无法理解并且不起作用（我对 React-Native 很陌生）

到目前为止，这是我的代码：

export default function Listt () {

    const [click, setClick] = useState(null);
    const [productsData, setproductsData] = useState([]);

    const ItemView = ({item, index}) => {
      return (
        // FlatList Item
        <TouchableOpacity style={styles.row} onPress={() => {setClick(index);}}>
          <View>
            <Text style={styles.rowtext}>
              {item[0]+ '  ' + item[1]}
            </Text>
          </View>
        </TouchableOpacity>
      );
    };

    async function loadInState() { 
      const keys =await AsyncStorage.getAllKeys();  
      const result = await AsyncStorage.multiGet(keys); 
      setproductsData([...productsData, ...result]);
    }


    useFocusEffect(
      React.useCallback(() => {
          loadInState()        
      }, [])
    );

    return (
      <View style={styles.container}>
        <FlatList
        data={productsData}
        renderItem={ItemView}
        keyExtractor={(item, index) => index.toString()}
        />

      </View>
    );
};

const styles = StyleSheet.create({
  
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },

  row: {
    width:widtht,
    height:45,
    borderWidth: 2, 
    borderColor: 'black',
    textAlign: 'center',
    justifyContent: 'center',
    alignItems:'center',
    textAlign:'center'
    //backgroundColor:'blue',
  },
  rowtext:{
    fontSize:17,
  },

});

扎伊德·库雷希

您可以简单地使用index.which 唯一标识列表中的每个项目，这是您可以使用的代码。

const ItemView = ({item, index}) => {
      return (
        // FlatList Item
        <TouchableOpacity style={[styles.row,{backgroundColor: click===index ? 'tomato':'transparent'}]} onPress={() => {setClick(index);}}>
          <View>
            <Text style={styles.rowtext}>
              {item[0]+ '  ' + item[1]}
            </Text>
          </View>
        </TouchableOpacity>
      );
    };

在这里，当您按下按钮时，我使用了我最喜欢的番茄颜色，但您可以根据需要使用，在我使用透明的地方，您可以使用其他颜色，例如白色或任何您想要的颜色。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。