我如何构造这个React Native Section List实现

Question

所以我想以一种非正统的方式使用RN Section列表。

我希望部分列表将渲染传递给组件，因为渲染不会非常统一。

我想使用部分列表，以便在滚动时仍然可以看到标题。

我制作了一个接收子项并将其呈现在部分列表中的组件，如下所示：

class SomeSectionList extends Component {

    render() {
        let sections = React.Children.map(this.props.children, (Child, index) => {
            return {title: Child.type.title, data: [''], renderItem: () => Child, index }
    });

        return (
            <SectionList

                renderSectionHeader={({section}) => {
                    return <Text style={{ fontWeight: "bold" }}>{section.title}</Text>
        }}
                sections={sections}
                keyExtractor={(item, index) => item + index}
            />
        );
    }
}

用法将类似于：

                <SomeSectionList>
                    <Comp1 />
                    <Comp2 />
                </SomeSectionList>

但是，我的问题是。说在这种情况下，Comp1不会从其组件中呈现任何内容，我希望能够从部分列表中隐藏其部分。

SomeSectionList组件如何知道它没有呈现任何内容或没有数据可以呈现任何内容，因此可以隐藏它的section和header？

任何建议都很好。我觉得使用SectionList这样做是过分的（但它使标头显示得更好），因此也对替代品开放。

Answer 1

您可以使用onLayout附带的方法来完成此操作View。

通过它我们可以获得渲染组件的高度。如果它是 0，则意味着其中没有渲染任何内容，否则它包含一些数据。

请参阅有关零食的工作示例

export default class App extends React.Component {
  render() {
    return (
      <SomeSectionList>
        <Comp1 />
        <Comp2 />
        <Comp1 />
        <Comp2 />
        <Comp1 />
      </SomeSectionList>
    );
  }
}

class Comp1 extends React.Component {
  render() {
    return (
      <View>
        <Text>Comp11</Text>
      </View>
    );
  }
}

class Comp2 extends React.Component {
  render() {
    return null;
  }
}

class SomeSectionList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      children: this.props.children,
    };
  }
  onLayout = (event, index) => {
    if (event.nativeEvent.layout.height <= 0) {
      let oldProps = this.state.children;
      oldProps.splice(index, 1);
      this.setState({ children: oldProps });
    }
  };
  render() {
    let sections = React.Children.map(this.state.children, (Child, index) => {
      return {
        title: Child.type.title,
        data: [''],
        renderItem: () => (
          <View onLayout={event => this.onLayout(event, index)}>
            {this.state.children[index]}
          </View>
        ),
        index,
      };
    });

    return (
      <SectionList
        renderSectionHeader={({ section }) => {
          return <Text style={{ fontWeight: 'bold' }}>{section.title}</Text>;
        }}
        sections={sections}
        keyExtractor={(item, index) => item + index}
      />
    );
  }
}

在这里，首先我们已经分配this.props.children了状态。然后在onLayout方法中，我们检查当前索引子项的高度是否为 0。如果是，则将其从子数组中删除。

您会清楚地看到某些视图正在删除。对于这件事，我们在一种情况下所做的就是放置一个加载器，以绝对位置覆盖整个SectionList区域，并且当所有内容都正确渲染时，您可以隐藏它。