React Native Flex没有给组件增加高度

Question

我正在尝试创建类似这样的东西：

标记为Dates，Time的部分是我dates和timeSpan中数据的存放位置。红色区域是放置日历的地方。

我一直在尝试使Views看起来像表格，但是效果不是很好。这是我的代码：

<ScrollView>
      <View>...</View>
      <View **
          style={{
              marginHorizontal: 10,
              marginTop: 10,
              flex: 1,
              borderColor: Colors.separatorColor,
              borderWidth: StyleSheet.hairlineWidth}}>
                  <View style={{
                      flex: 1, 
                      flexDirection: 'row', 
                      borderBottomWidth: StyleSheet.hairlineWidth,
                      borderBottomColor: '#EDEDED'}}>
                          <View style={{1, backgroundColor: '#ff0000'}}/>
                        {
                            dates.map((date, i) => {
                                <View key={i} style={{
                                    flex:1, 
                                    backgroundColor: '#00fff0', 
                                    borderRightColor: '#EDEDED', 
                                    borderRightWidth: StyleSheet.hairlineWidth}}>
                                    <Text>{date}</Text>
                                </View>
                            })
                        }
                        <View style={{flex: 1, backgroundColor: '#ff0000'}}/>
                    </View>
                    {
                        timeSpan.map((time,i) => {
                            <View style={{
                                flex: 1, 
                                flexDirection: 'row', 
                                borderBottomWidth: StyleSheet.hairlineWidth,
                                borderBottomColor: '#EDEDED'}}>
                                <View style={{flex: 1, backgroundColor: '#ff0000'}}/>
                                <View style={{flex: 1, backgroundColor: '#ff0000'}}/>
                            </View>
                        })
                    }
                </View>
                <View>...</View>
            </ScrollView>

<View>...</View>是Other Stuff的代码，它只会使我的问题看起来更长，因此我将其删除。我正在尝试使<View>看起来像一个具有dates.length列和timeSpan.length行的表。

现在的问题是，当我将flex: 1赋予我在代码中用View标记的**时，屏幕上什么也没有出现。但是，如果我给它一个固定的高度，例如height: 260，那么我会得到一个大的红色框，而不是看到许多View组成我的自定义日历。

我已将静态数据放入dates和timeSpan中，并通过记录日志记录检查了迭代是在这些数组上完成的，因此我确信正在创建行和列，但未显示它们在屏幕上。

我如何解决我认为是由flex值引起的问题？

编辑：

这是我的应用程序的小吃示例：

<div data-snack-id="@ohnu93/tenacious-marshmallows" data-snack-platform="ios" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"></div>
<script async src="https://snack.expo.io/embed.js"></script>