React-native boolean=true 仅适用于相关数组，其他数组为 false，Flatlist

Question

我试图确保在按下时不是所有 this.state.users.expended=true 而是我点击的那个，问题是我使用的是 flatlist 并且它正在改变所有展开的状态数组元素我试过使用循环、条件语句并将数组包装在另一种状态但没有结果。谁能帮忙，谢谢

这是代码

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>
    );
  }
}

Answer 1

首先，获取 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, ...

Answer 2

您可以将扩展状态与数据状态数组分开，例如 expandedUserId。这使得更新变得容易，也不会更新平面列表数据。您需要在 FlatList 的 extraData prop 中传递 expandedUserId 以便当此状态更新时平面列表也会更新。

一个标记属性用于告诉列表重新渲染（因为它实现了 PureComponent）。如果您的任何 renderItem、Header、Footer 等函数依赖于 data 属性之外的任何内容，请将其粘贴在这里并一成不变地对待它。

在您的 renderItem 函数中，您可以简单地检查 expandedUserId 是否等于当前行的 id。

const expanded = this.state.expandedUserId = data.item.id;

如果您的应用允许同时展开多个用户，您可以expandedUserId声明一个对象，例如

expandedUserId: { '12': true, '25': false, '37': true }

React-native boolean=true 仅适用于相关数组，其他数组为 false，Flatlist

React-native boolean=true only for concerned array and false for others, Flatlist

arrays

boolean

react-native

react-native-flatlist