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将会意识到您的状态变化，并会自动更新并获得最佳性能。