React native 反应本地平面列表忽略样式

我陷入了为什么平面列表忽略了几乎所有的样式，比如列表项周围的空格和标题组件周围的空格等等

这是我的密码：

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>

结果是，有些样式不起作用，比如flex、空格

以下是我正在寻找的结果：

---

我不知道是什么导致了这个问题。但是，您可以从中获得接近所需外观的结果

---

我不知道是什么导致了这个问题。但是，您可以从中获得接近所需外观的结果

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
},