Question

我正在尝试在React-Native应用程序中扩展/折叠Flatlist。但是，它并没有扩大。我试图显示平面列表标题数据，然后，如果用户点击每个部分，我必须扩展单元格并需要在其中显示另一个单元格。就像细胞内部的细胞一样，我是React-Native的新手。

Class.js

      constructor(props) {
        super(props);
        this.state = {
          selected: (new Map(): Map<string, boolean>),
        };
        this.itemSelectionHandler.bind(this);
      }

  selectionHandler = (data) => {
    const { navigation } = this.props;
    navigation.navigate('someclass', { selectedData: data });
  }

     keyExtractor = (item, index) => `some-${index}`;


      separator = () => (<View style={styles.separator} />);

          headerSectionExpandCollapseHandler = (index) => {
            this.setState((state) => {
              // copy the map rather than modifying state.
              const selected = new Map(state.selected);
              selected.set(index, !selected.get(index)); // toggle
              return { selected };
            });
          }
      renderExpandCollapseCell = ({ item, index }) => (
        <expandCollapaeCell
          title={get(item, 'title')}
          item={get(item, 'name')}
          code={get(item, 'code')}
          onExpandToggled={() => this.headerSectionExpandCollapseHandler(get(item, index))}
          expanded={!!this.state.selected.get(item, index)}
          onSelected={this.selectionHandler}
        />
      )


        render() {
            const { data } = this.state;
             return (
                        <FlatList
                        contentContainerStyle={{ flexGrow: 1 }}
                        data={data}
                        extraData={this.state}
                        keyExtractor={this.keyExtractor}
                        renderItem={this.renderExpandCollapseCell}
                        ItemSeparatorComponent={this.separator}
                        onSelected={this.itemSelectionHandler}

                      />
          );
        }


    `

ExpandCollapseCell.js

    export default class ExpandCollapseCell extends PureComponent {
      data = (item, index) => (
        <View key={`some-cell-${index}`}>
          <TouchableOpacity activeOpacity={0.8} onPress={this.props.onSelected.bind(this, item)}>
            <View style={styles.somestyles}>
              <View style={styles.somestyles}>
                <Text style={[styles.title]}>{get(item, 'name')}</Text>
                <Text style={[styles.code]} numberOfLines={2}>{`(${get(item, 'code')})`}</Text>
              </View>
            </View>
          </TouchableOpacity>
        </View>
      )

      render() {
        const { expanded, title, item, onExpandToggled, onSelected } = this.props;

        const cellHeight = expanded ? (item.length * 40) + 30 : 30;
        return (
          <View style={[styles.container, { height: cellHeight }]}>
            <View style={styles.headerContainer}>
              <TouchableOpacity style={styles.headerButton} onPress={onExpandToggled}>
                <View style={styles.detailsContainer}>
                  <Image source={expanded ? res.images.arrow_up : res.images.arrow_down} />
                  <DefaultLabel
                    labelStyle={[styles.font, styles.color]}
                  >
                    {title}
                  </DefaultLabel>
                </View>
              </TouchableOpacity>
            </View>
            <View style={[styles.cellContainer]}>
              {expanded && item.map(this.data)}
            </View>
          </View>
        );
      }
    }

它只是显示数据，但不扩展单元格。有什么建议吗？

Flatlist折叠/展开在React-Native中不起作用

0 个答案: