Question

一个好的ole <FlatList/>呈现为React Native：

function ListItem() {
    return (<View></View>);
}

function MyList({renderData}) {
    return (
    <FlatList
      data={renderData}
      renderItem={
        ({item}) => {
          return (
            <ListItem 
              fieldOne={item.fieldOne} 
              fieldTwo={item.fieldTwo}
            />
            )
        }
      }
    />
    )
}

当FlatList仅包含一种类型的项目（在这种情况下为ListItem）时，这很好用。但是，除非我们做一些renderItem恶作剧，否则不允许在整个FlatList中使用不同的组件：

function ListItem() {
    return (<View></View>);
}
function ListItemTwo() {
    return (<View></View>);
}
function MyList({renderData}) {
    return (
    <FlatList
      data={renderData}
      renderItem={
        ({item}) => {
          if( item.listItemType == 0 ){
          return (
            <ListItem 
              fieldOne={item.fieldOne} 
              fieldTwo={item.fieldTwo}
            />
            )
          } else {
            return <ListItemTwo fieldOne={item.fieldOne} fieldTwo={item.fieldTwo} />
          }
        }
      }
    />
    )
}

这可行，但是它取决于每个数据项中的一个附加字段：item.listItemType，并且还取决于我希望显示的每个附加项中是否有一个附加数据项存储在数据中。

我正在寻找一种解决方案，该解决方案允许对不依赖于数据中存在的该附加项并且完全不依赖于该数据的附加组件进行硬编码。

基本上，我希望在<FlatList>的末尾创建一个项目，该项目在FlatList数据中没有相应的元素，因为它不需要显示数据。在React Native中这可能吗？怎么样？

没有数据的React Native中的不同，不同的FlatList项目

0 个答案: