React-Native Flatlist 忽略样式答案

【问题标题】：React-Native Flatlist ignoring stylesReact-Native Flatlist 忽略样式
【发布时间】：2020-10-12 09:10:14
【问题描述】：

我不明白为什么 Flatlist 会忽略几乎所有样式，例如空格周围的列表项和空格周围的标题组件等等。

这是我的代码：

renderHeader = () => {
        return (
            <Text style={styles.scheduleHeaderContainer}>
                <Text style={styles.headerNotReady}>NOT READY YET</Text>
                <Text style={styles.headerCleared}>CLEARED</Text>
            </Text>
        )
    }

    renderItemSeparator = () => <View style={{height: 10, backgroundColor: '#828282', width: 1, zIndex: 1, position: 'absolute'}}/>
...

<View style={styles.listContainer}>
            <FlatList
                data={this.state.rooms}
                style={styles.scheduleContainer}
                horizontal={false}
                numColumns={4}
                ListHeaderComponent={this.renderHeader}
                ItemSeparatorComponent={this.renderItemSeparator}
                renderItem={({ item, index }) => {
                  console.log('item', item.room);
                  return (
                    <View style={styles.elementsContainer}>
                        <Text>
                            {item.room.data.name}
                        </Text>
                    </View>
                    );
                }}
                keyExtractor={(item, index) => String(index)}
            />
        </View>

这里有一些样式：

listContainer: {
    position: 'absolute',
    width: '100%',
    left: 14,
    right: 14,
    top: 353,
    height: 200,
},

scheduleContainer: {
    backgroundColor: '#FFFFFF', 
    alignSelf: 'center',
    width: '100%'
},

scheduleHeaderContainer:{
    alignSelf: 'center',
},

headerNotReady: {
    flex: 1,
},

headerCleared: {
    flex: 1
},

结果如下，有些样式不起作用，例如 flex、space-around ...

这是我正在寻找的结果：

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案1】：

我不知道是什么导致了问题。但是，您可以获得接近您想要的外观的结果。

https://snack.expo.io/LZGnhJwoz

【讨论】：