Question

对于这个问题，假设我正在将Medium构建为React Native应用程序，特别是您阅读故事的屏幕。

这是一个长屏幕，向下滚动时会出现不同类型的内容。标题，作者信息，内容（段落，图像，视频等），最后的一些元信息，社交功能（例如评论）等。

构建这样的视图的推荐方法是什么？ ScrollView的性能似乎不够好，尤其是在内容中需要加载视频或其他媒体类型的情况下。 ListView似乎是性能更高的选项，但似乎不是为该用例设计的。

还有其他人面临这个挑战吗？最好的解决方法是什么？

Answer 1

我的应用程序中的一个屏幕出现了类似的问题，其中涉及各种类别的组件，对于我的情况<FlatList>来说效果很好，性能也达到了极限。

解决方案

Example.js

import React, { Component } from "react";
import { FlatList } from "react-native";

export default class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showProgress: false,
      content: [{}, {}, {}] // list of objects
    };
  }

  onRefresh() {
    this.setState({ showProgress: true });
    // call methods here to load new data, once loaded make sure to reset the loading state to false
    this.setState({ showProgress: false });
  }

  showParagraph() {
    return <React.Fragment>{/* Your paragraph */}</React.Fragment>;
  }

  showVideo() {
    return <React.Fragment>{/* Your Videos */}</React.Fragment>;
  }

  showAudio() {
    return <React.Fragment>{/* Your Audio */}</React.Fragment>;
  }

  renderItem(item) {
    return (
      <React.Fragment>
        {item.isVideo ? showVideo() : showParagraph()}
      </React.Fragment>
    );
  }

  NoDataMessage() {
    return <React.Fragment>{/* Empty screen message goes here */}</React.Fragment>;
  }

  render() {
    return (
      <FlatList
        data={this.state.content}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => this.renderItem(item)}
        onRefresh={() => this.onRefresh()}
        refreshing={this.state.showProgress}
        ListEmptyComponent={this.NoDataMessage()}
      />
    );
  }
}

详细了解here中的道具，您也可以制作无限的新闻提要，例如Facebook主页，请检查此React native infinite scroll with flatlist

希望这会有所帮助..！

Answer 2

<ScrollView>首先渲染其所有子级。因此，假设您有数千个元素（中型文章），<ScrollView>将首先渲染所有元素，这非常慢并且可见。

在这些情况下，可以使用<FlatList>，它会在子项进入视口时对其进行渲染。因此，它是高性能的。

您可以在此处参考<FlatList>文档：https://facebook.github.io/react-native/docs/flatlist

如何在React Native中构建长的可滚动内容视图？

2 个答案: