React Native -数据网格

Question

我正在开发一个适用于Android/iOS的业务应用程序，用户可以通过在表格/数据网格中添加文章来创建发票。我正在使用React Native，正在寻找合适的组件。需求是添加/删除行和更改单元格。

我尝试了一些组件，但它们不能满足我的需求。

你对React Native下的数据网格有什么建议吗？

Answer 1

最适合您需要的选择是使用FlatList组件。这是由react-native团队推荐的，性能良好(参见here)。FlatList也很容易使用，你可以通过here阅读它的有用文档。FlatList的一个简单示例如下所示：

  _keyExtractor = (item, index) => item.id;

  _renderItem = ({item}) => (
    <MyListItem
      id={item.id}
      title={item.title}
    />
  );

  render() {
    return (
      <FlatList
        data={this.state.data}
        extraData={this.state}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
      />
    );
  }

您可以简单地在FlatList的输入列表(在本例中为this.state.data)中添加或移除项目，并通过将this.state值传递给extraData属性，FlatList将知道您的状态更改，并将以最佳性能自动更新。