样式化 React Native FlatList

Question

我正在尝试获取列表的 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,
  }

Answer 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} />
         />

样式化 React Native FlatList

Styling React Native FlatList

flexbox

reactjs

react-native

react-native-flatlist