样式化 React Native FlatList答案

【问题标题】：Styling React Native FlatList样式化 React Native FlatList
【发布时间】：2020-11-01 00:11:44
【问题描述】：

我正在尝试获取列表的 HeaderComponent 旁边的 FlatList 项目。我希望房间从创建房间旁边开始。这是它的外观图像 [1]：https://i.stack.imgur.com/qyZZP.png

这是房间列表的代码：

<FlatList
   ListHeaderComponent={<Room create />}
   numColumns={2}
   data={this.props.rooms}
   keyExtractor={(room) => room._id}
   renderItem={(itemData) => <Room room={itemData.item} create={false}/>
/>

这是房卡的样式：

cardStyle: {
    backgroundColor: "white",
    borderRadius: 10,
    width: Dimensions.get("window").width / 2.6,
    height: Dimensions.get("window").width / 2.6,
    padding: 10,
    margin: 10,
  }

【问题讨论】：

标签： reactjs react-native flexbox react-native-flatlist

【解决方案1】：

除非你“作弊”，否则我认为这是不可能的。

我的意思是这样的：

const rooms = this.props.rooms;
rooms.unshift({});
...
...

        <FlatList
            numColumns={2}
            data={rooms}
            keyExtractor={(room) => room._id}
            renderItem={(itemData) => itemData.index === 0 ? <Room create /> : <Room room={itemData.item} create={false}/> 
            room={itemData.item} create={false} />
         />

【讨论】：