在列表视图中反应原生更改颜色视图答案

【问题标题】：react native change color view in list views在列表视图中反应原生更改颜色视图
【发布时间】：2021-09-28 23:20:30
【问题描述】：

我有一个元素数组并创建一个列表。它们都是一样的，我想改变被触摸的项目的颜色。在地图中创建它们时，我得到相同的状态并且它们都改变了颜色。

我只希望被触摸的项目改变颜色

颜色状态：

const [myColorItem, setMyColorItem] = useState('#fff');

创建一个列表项：

let Arr = data.hours.map((item, i) => {
return <Item key={i} myId={i} hour={item.hour} isBusy={item.isBusy}/>

})

项目是：

<TouchableOpacity 
  style={{ backgroundColor: myColorItem }} 
  onPress={() =>hourSelected(hour)}>
  <Text style={styles.textStyle_hour} >{hour}</Text>
  <Text style={{color: '#cacaca'}}>Disponible</Text>
</TouchableOpacity>

方法是：

const hourSelected = (hour) => {
console.log('hora selec '+hour);
setMyColorItem('#00acba');

};

更新感谢您的反馈。他们帮助我编写了代码。

新变量：

const [itemSelectedList, setItemSelectedList] = useState([false,false,false,false,false,false,false,false,false])

const hourSelected = (myId, hour) => {
console.log('hora selec '+hour);
let selectedList = [...itemSelectedList];
selectedList[myId] = !selectedList[myId];
setItemSelectedList(selectedList);

};

和触摸按钮

    <TouchableOpacity 
  style={{ backgroundColor: itemSelectedList[myId] ? '#00acba' : '#ffffff'  }} 
  onPress={() =>hourSelected(hour)}>
  <Text style={styles.textStyle_hour} >{hour}</Text>
  <Text style={{color: '#cacaca'}}>Disponible</Text>
</TouchableOpacity>

【问题讨论】：

标签： reactjs list state touch native

【解决方案1】：

考虑像这样重新组织你的状态：

const [itemSelected, setItemSelected] = useState(null);

let Arr = data.hours.map((item, i) => {
   return <Item key={i} myId={i} hour={item.hour} isBusy={item.isBusy} />
})

<TouchableOpacity 
  style={{ backgroundColor: myId === itemSelected ? '#cacaca' : '#ffffff' }} 
  onPress={() =>hourSelected(hour,myId)}>
  <Text style={styles.textStyle_hour} >{hour}</Text>
  <Text style={{color: '#cacaca'}}>Disponible</Text>
</TouchableOpacity>

const hourSelected = (hour,myId) => {
    console.log('hora selec '+hour);
    setItemSelected(myId);
};

请记住，使用索引作为 id 和 key 是一种不好的做法。 https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318

【讨论】：

谢谢！如果我选择一个，它会很好地改变颜色为“cacaca”，如果我选择另一个，它会很好地改变颜色为“cacaca”，但前一个会改变颜色为“ffffff”。我想保留已经按下的颜色。

【解决方案2】：

这有助于更改单个/多个选择项的颜色

在准备清单时，您可以为项目维护一个标志

const [responseList, setResponseList] = useState([])

 data.hours= data.hours.map(item => {
        item.isSelect = false;
        return item;
      });
      setResponseList(data.hours)

接下来您可以传递索引并选择单个或多个项目

function setData(index) {
 let doc = []
 responseList.map(item => {
 item.select = false     
 doc.push(item)
 })
 doc[index].isSelect = true
 setResponseList(doc)
 }


var selectedColor = '#337AB7'
var defaultColor = '#A9A9A9'

并且在列表中可以相应地为单个/多个选定项目设置颜色

<TouchableOpacity 
style={{ backgroundColor: item.isSelect? selectedColor : defaultColor}} 
onPress={() =>hourSelected(hour,myId)}>
<Text style={styles.textStyle_hour} >{hour}</Text>
<Text style={{color: '#cacaca'}}>Disponible</Text>
</TouchableOpacity>

为了保持多个项目的选择和未选择状态

function setData(index) {
var isSelected = responseList[index].isSelect
responseList[index].isSelect = !isSelected
let doc = []
responseList.map(item => {
  doc.push(item)
})
setResponseList(doc)
}

除了标志之外，您还可以在准备列表时为每个项目维护一个 colorTheme，并通过索引项目 colorTheme 可以更改，并且适用于单个和多个选定项目

【讨论】：