arrays - React-native boolean=true 仅适用于相关数组，其他数组为 false，Flatlist
问题描述
我试图确保在按下时不是全部this.state.users.expended=true，只有我点击的那个，问题是我使用的是平面列表，它正在改变我尝试使用循环的所有数组元素中所有展开的状态，有条件声明并将数组包装在另一种状态但没有结果。谁能帮忙，谢谢
这是代码
import React, { Component } from 'react';
import { View, Text, FlatList, Image, ImageBackground, PixelRatio, Platform, UIManager, TouchableOpacity, LayoutAnimation } from 'react-native';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'
import DropDownItem from 'react-native-drop-down-item';
export default class App extends Component {
constructor (props) {
super(props)
this.state ={
users : [
{
spec1: require("./Icons/Growth.png"),
spec2:require("./Icons/RED.png"),
spec3:require("./Icons/LAGG.png"),
name: 'Induce',
price: '$',
image: require("./Icons/RF.jpg"),
icon: '',
category: 'NA',
textLeft:'',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
{
spec1: '5a31077f6dda99e234ad6727',
name: 'Cathy Gilliam',
price: 'EXOVENT',
image: 'red',
icon: '',
expanded: false
},
]
}
if (Platform.OS === 'android') {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
}
changeLayout = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
this.setState({ expanded: !this.state.expanded });
}
render() {
return (
<View
style={{
backgroundColor:'#262A2C',
flex:1
}}>
<FlatList
style={{marginTop:80,}}
data={this.state.users}
renderItem={({ item }) => (
<View>
<ImageBackground
source={item.image}
//pay FlatIcon or design personal one
style={{
resizeMode: 'contain',
position:'relative',
width: wp('100%'),
left: wp('0%'),
borderBottomWidth: 1,
borderBottomColor: 'grey',
padding: hp('6%'),
}}
>
<View
style={{
flex:1,
height:hp('19%'),
width: wp('100%'),
//height:hp('21%'),
borderBottomColor: 'grey',
}}>
<Image
style={{
width:wp('10%'),
height:hp('5%'),
left:wp('-10%'),
top:hp('-5.5%'),
//tintColor:'#81F018'
}}
source={item.spec1}/>
<Image
style={{
width:wp('10%'),
height:hp('5.5%'),
left:wp('-10%'),
top:hp('0%'),
//tintColor:'#81F018'
}}
source={item.spec2}/>
<Image
style={{
width:wp('10%'),
height:hp('5.5%'),
left:wp('-10%'),
top:hp('6%'),
//tintColor:'#81F018'
}}
source={item.spec3}/>
<Text
style={{ fontWeight: 'bold',
fontSize: 22,
left:item.name.length<=5 ? wp('32.5%'):wp('27.5%'),
top:hp('-9.5%'),
//left:item.name.length<=5 ? wp('31.5%'):wp('26.5%'),
//top:hp('-1.5%')
//left:item.name.length<=5 ? wp('32.5%'):wp('27.5%'),
//top:hp('-3.5%')
}}>
{item.name}
</Text>
<Text
style={{
fontWeight: 'bold',
fontSize: 25,
top: hp('-25%'),
left:wp('80%')
// top: hp('-14%'),
//left:wp('80%')
//top: hp('-19%'),
//left:wp('80%')
}}>
{item.price}
</Text>
</View>
</ImageBackground>
<TouchableOpacity activeOpacity={0.8} onPress={this.changeLayout} style={{ padding: 10,
backgroundColor:'black',
left:wp('-10.9%'),
top:hp('0%'),
width: wp('120%'),
height:hp('5%')}}>
</TouchableOpacity>
<View style={{ height: this.state.expanded ? null : 0, overflow: 'hidden', backgroundColor:'black' }}>
<Text style={{
fontSize: 17,
color: 'white',
padding: 10}}>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</Text>
</View>
</View>
)}
/>
</View>
);
}
}
解决方案
首先，获取index要更新的项目：
renderItem={({ item, index }) => (
将其传递给以changeLayout更新项目：
<TouchableOpacity onPress={() => this.changeLayout(index)}
然后，使用它changeLayout：
changeLayout = index => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
this.setState(({ users }) => ({
users: users.map((u, i) => ({ ...u, expanded: i === index }))
}));
};
最后，使用它：
<View style={{ height: item.expanded ? null : 0, ...