在React Native中的嵌套平面列表中增加父平面列表项高度而不是子平面列表

Question

我正在尝试创建一个嵌套的Flatlist（另一个Flatlist内的Flatlist），其中包含从网络服务中获取的动态数据。

一旦内部内部列表数据被获取，我将根据内容尝试增加父级平面项目的高度。

有人可以指导我解决问题吗

下面是我正在工作的视图

从App.js

renderItem = ({ item }) => {
    if (item.empty === true) {
      return <View style={[styles.item, styles.itemInvisible]} />;
    }
    return (
      <View style={styles.item}>
        <Text style={styles.itemText}>Name</Text>
        <Text style={styles.itemText}>{item.key}</Text>

        <InnerListView updateHeight={this.updateHeight} />
      </View>

    );
  };

render() {
    return (
      <FlatList
        data={[
          { key: 'ABCDEFGH' }
        ]}
        style={styles.container}
        renderItem={this.renderItem}
        numColumns={numColumns}
      />
    );
  }

来自InnerList

find_dimesions(layout){
        const {x, y, width, height} = layout;
        console.warn("xpos"+ x);
        console.warn("ypos"+y);
        console.warn("width"+width);
        console.warn("height"+height);
        this.props.updateHeight(height)
      }

    renderItem = ({ item, index }) => {
        if (item.empty === true) {
            return (<View style={[styles.item, styles.itemInvisible]} />);
        }
        return (
            <View style={styles.item}>
                <Text style={styles.itemText}>Name</Text>
                <Text style={styles.itemText}>{item.key}</Text>
            </View>
        );
    };

render() {
        return (
              <FlatList
              onLayout={(event) => { this.find_dimesions(event.nativeEvent.layout) }}
                data={formatData(data, numColumns)}
                style={styles.container}
                renderItem={this.renderItem}
                numColumns={numColumns}
              />
        );
    }

我希望父视图（即redView高度）需要增加。

Answer 1

首先，仅供参考：如果需要，您也可以使用单个SectionList创建此精确布局。

但是要回答您的问题，以便在内层更新时使外层平面列表更新其内容/布局，可以使用FlatList中的extraData属性。此属性允许FlatList在其值更改后进行更新。因此，您提供给外部FlatList的extraData应该与内部FlatList的数据相同。