在 React Native 中的嵌套平面列表中增加父平面列表项高度 w.r.t 子平面列表答案

【问题标题】：Increase Parent Flatlist Item Height w.r.t child flatlist in Nested flatlist in React Native在 React Native 中的嵌套平面列表中增加父平面列表项高度 w.r.t 子平面列表
【发布时间】：2019-01-02 10:55:40
【问题描述】：

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

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

谁能指导我解决问题

以下是我正在工作的视图

来自 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}
      />
    );
  }

来自内部列表

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 高度需要增加。

【问题讨论】：

标签： react-native react-native-ios react-native-flatlist

【解决方案1】：

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

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

【讨论】：