Как я могу сделать, чтобы мои аккордеонные предметы открывались по 1 за раз?

Question

Я пытаюсь сделать список аккордеонов без использования каких-либо модулей, но я застрял на этом этапе. У меня есть расширенное состояние, которое ложно в начале. В onPress я делаю расширенное значение true, и {this.state.expanded && этот фрагмент кода делает видимость видимой, если расширенное значение равно true. Я использовал это руководство по аккордеону . У меня есть более 1 предмета, но когда я нажимаю один из них, все они открываются. Как мне решить это?

export default class FAQs extends Component {
    constructor(props) {
        super(props);
        this.state = {
            expanded: false,
            menu: [
                {
                    title: 'Non Veg Biryanis',
                    data: 'some data',
                },
                {
                    title: 'Pizzas',
                    data: 'soem data'
                },
            ]
        }
    }
    toggleExpand = () => {
        this.setState({ expanded: !this.state.expanded })
    }
    render() {
        return (
            <View style={container}>
                <FlatList
                    data={this.state.menu}
                    renderItem={({ item }) =>
                        <View style={card}>
                            <TouchableOpacity onPress={() => this.toggleExpand()}>
                                <View style={this.state.expanded ? cardHeaderBoxExpanded : cardHeaderBoxNotExpanded}>
                                    <View style={headerBox}>
                                        <Text style={cardHeader}>{item.title}</Text>
                                    </View>
                                </View>
                            </TouchableOpacity>
                            {this.state.expanded &&
                                <View style={cardTextBox}>
                                    <Text style={cardText}>
                                        {item.data}
                                    </Text>
                                </View>
                            }
                        </View>
                    }
                    keyExtractor={item => item.title}
                />
            </View>
        )
    }
}

Answer 1

Вам необходимо создать уникальное расширенное состояние для каждого из ваших аккордеонов.

Вот пример ниже:

export default class FAQs extends React.PureComponent {


 static MENU = [
    {
      title: 'Non Veg Biryanis',
      data: 'some data',
    },
    {
      title: 'Pizzas',
      data: 'soem data',
    },
  ]

  constructor (props) {
    super(props);
    this.state = {
      menu: FAQs.MENU,
      expandedList: FAQs.MENU.map(() => ({ expanded: false })),
      refresh: false,
    };
  }

  toggleExpand = (i) => {
    this.state.expandedList[i].expanded = !this.state.expandedList[i].expanded;
    this.setState({
      refresh: !this.state.refresh,
    });
  }

  render () {
    return (
      <View style={container}>
        <FlatList
          data={this.state.menu}
          extraData={this.state.refresh}
          renderItem={({ item, index }) =>
            <View style={card}>
              <TouchableOpacity onPress={() => this.toggleExpand(index)}>
                <View style={this.state.expanded ? cardHeaderBoxExpanded : cardHeaderBoxNotExpanded}>
                  <View style={headerBox}>
                    <Text style={cardHeader}>{item.title}</Text>
                  </View>
                </View>
              </TouchableOpacity>
              {this.state.expandedList[index].expanded &&
              <View style={cardTextBox}>
                <Text style={cardText}>
                  {item.data}
                </Text>
              </View>
              }
            </View>
          }
          keyExtractor={item => item.title}
        />
      </View>
    );
  }
}