如何让我的手风琴物品一次打开 1 个？

Question

我试图在不使用任何模块的情况下制作手风琴列表，但此时我卡住了。我有一个扩展状态，一开始是错误的。在 onPress 中，我将 expanded 设置为 true 并且 {this.state.expanded && 如果 expanded 为 true，这段代码会使视图可见。这个我用过accordion guide。我有不止一项，但当我单击其中一项时，所有项目都会打开。我该如何解决？

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

如何让我的手风琴物品一次打开 1 个？

How can I make my accordion items opens 1 at a time?

accordion

react-native