时间戳

首页 > 解决方案 > 从对象数组中更改选定项的边框颜色

react-native - 从对象数组中更改选定项的边框颜色

问题描述

我想从我的数组中更改所选项目的边框颜色，我会将其映射到按钮 数组= [{id: 0, name: "josh" }, {id: 1, name: "tim"}, {id ：2，名称：“乔纳森”}]。我怎样才能做到这一点？如果我从按钮中选择 1，所有边框颜色都会改变。请帮助我，我是 React Native 的新手。谢谢

标签： react-native

解决方案

您可以创建两种样式，一种用于简单项目，另一种用于选定项目。然后你可以根据条件申请。这是示例：

import React from "react";
import { FlatList, TouchableOpacity, StyleSheet, Text } from "react-native";
import { useState } from "react";

const YourComponent = () => {
  const yourArray = [
    { id: 0, name: "josh" },
    { id: 1, name: "tim" },
    { id: 2, name: "jonathan" },
  ];
  const [selectedItem, setSelectedItem] = useState(null);

  return (
    <FlatList
      data={yourArray}
      extraData={yourArray}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({item, index}) => (
        <TouchableOpacity 
          style={[styles.listItem, selectedItem === item.id ? styles.selectedItem : null]}
          onPress={() => setSelectedItem(item.id)}
        >
          <Text>{item.name}</Text>
        </TouchableOpacity>
      )}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  listItem: {
    padding: 10,
    borderWidth: 1,
    borderColor: '#dddddd'
  },
  selectedItem: {
    borderColor: '#00ff00',
  },
});

export default YourComponent;

推荐阅读