React-Native FlatList 不滾動

Question

我對本機反應很陌生。 我創建了一個 FlatList 來呈現這個項目列表，但是它沒有滾動。 我已經用谷歌搜索了幾個小時，並嘗試了堆棧溢出線程中建議的幾乎所有內容 - 刪除了 flex，添加了 flex，將其包裝在一個視圖中，但似乎沒有任何效果。

這是我的代碼（問題出在第二個 FlatList 中）-

                return(
                    <View style = {{ height: '100%' }}>
    
                        <View style = {{ width: '100%' }}>
                            <AppHeader />
                        </View>
    
                        <View style = {{ width: '100%'}}>
    
                            <View style = {{ width: '70%', alignSelf: 'center', flex: 1 }}>
     
                                <View>
                                    <FlatList
                                        data = {this.getTodayDay()}
                                        renderItem = {this.renderItemDays}
                                        keyExtractor = {this.keyExtractor}
                                    />
                                </View>
    
                                    <FlatList
                                        data = {this.getVisibleHours()}
                                        renderItem = {this.renderItem}
                                        keyExtractor = {this.keyExtractor}
                                        scrollEnabled = {true}
                                    />

                
                            </View>
    
                        </View>
    
                    </View>

this.renderItem -

renderItem = () => {

// irrelevant code


        
        if( isClass === true ){
            return(
                <ListItem bottomDivider = {true} style = {styles.renderItemActiveClass}>
                    <ListItem.Content>

                        <TouchableOpacity
                            onPress = {()=>{
                                this.props.navigation.navigate('ClassDetailsScreen', { "data": classData })
                            }}>
                                <ListItem.Title>{ definiteClassTime }</ListItem.Title>
                                <ListItem.Subtitle>{ classData.class_name }</ListItem.Subtitle>
                        </TouchableOpacity>

                    </ListItem.Content>
                </ListItem>
            )
        }
        else{
            return(
                <ListItem bottomDivider = {true} style = {styles.renderItemClass} 
                containerStyle = {styles.renderItemContent}>
                    <ListItem.Content>
                        <ListItem.Title>{item}:00</ListItem.Title>
                        <ListItem.Subtitle>No Class</ListItem.Subtitle>
                    </ListItem.Content>
                </ListItem>
            )
        }

}

樣式表 -

    renderItemClass: {
        borderColor: 'purple',
        borderWidth: 2
    }, 

    renderItemActiveClass: {
        borderColor: 'green',
        borderWidth: 2
    },

    renderItemContent: {
    },

有人可以告訴我我做錯了什么嗎？

Answer 1

向兩個平面列表添加高度。 並且還將您的第二個平面列表包裝在單獨的視圖中。 這是一個例子：

return (
  <View style={{ height: "100%" }}>
    <View style={{ width: "100%" }}>
      <AppHeader />
    </View>

    <View style={{ width: "100%" }}>
      <View style={{ width: "70%", alignSelf: "center", flex: 1 }}>
        <View style={{ height: 60, alignSelf: "center" }}>
          <FlatList
            data={this.getTodayDay()}
            renderItem={this.renderItemDays}
            keyExtractor={this.keyExtractor}
          />
        </View>
        <View style={{ height: 60, alignSelf: "center" }}>
          <FlatList
            data={this.getVisibleHours()}
            renderItem={this.renderItem}
            keyExtractor={this.keyExtractor}
            scrollEnabled={true}
          />
        </View>
      </View>
    </View>
  </View>
);