平面列表不滚动

Question

i have a flatlist but it is not scrollable, first i set the height of it's parent container to screen height then i learned that it was a mistake to do so and also i didn't use flex:1 on any container still i can't scroll down.

so how to set the height of the flatlist to cover the entire screen and still be scrollable

 return( <LinearGradient style={DocumentStyle.box} colors={['#053f5c','#00b1b2',"#429ebd"]}> <DrawerIcon/> {isEmpty? <View style={{flex:1}}> <View style={DocumentStyle.conditions}> <Icon style={{flex:.3,opacity:.3,fontSize:125,fontWeight:'bold'}} name="file-pdf-o" color="#666"/> </View> </View>: <View> <DrawerIcon/> <SafeAreaView> <View style={DocumentStyle.searchBar}> <Icon style={DocumentStyle.searchIconStyle} name="search" color="#666"/> <TextInput style={DocumentStyle.searchText} value={search} placeholder="Rechercher un fichier" underlineColorAndroid='transparent' onChangeText={(text)=>searchFile(text)} /> </View> <View style={DocumentStyle.secondContainer}> <FlatList style={DocumentStyle.flatstyle} keyExtractor={(item)=>item['id']} data={filteredfile} renderItem={renderItem} onRefresh={()=>onRefresh()} refreshing={refresh} /> </View> </SafeAreaView> </View> } </LinearGradient> );

 import {StyleSheet,Dimensions} from 'react-native'; const width=Dimensions.get('window').width const height=Dimensions.get('window').height const DocumentStyle=StyleSheet.create({ box: { width:width, height: height, }, secondContainer:{ backgroundColor:'white', }, flatitem:{ backgroundColor:"white", shadowColor:'#000', shadowOffset:{ width:0, height:2, }, shadowOpacity:0.25, elevation: 5, color:'#666', padding:10, flexDirection:'row', justifyContent:'space-between' }, itemtext:{ flex:1, fontSize:18, color:'#666', padding:10, textAlign:'left' }, pdf:{ fontSize:25, padding:10, }, ellipsis:{ fontSize:20, paddingTop:15, color:'#17224d' }, searchBar:{ marginTop:60, borderWidth:0.5, alignSelf:'stretch', borderColor:'#17224d', borderRadius:15, padding:2, margin:10, flexDirection:'row', alignItems:'center', backgroundColor:"#fff" }, searchText:{ }, searchIconStyle:{ alignSelf:'flex-start', fontSize:18, alignSelf:'auto', marginRight:10, marginLeft:10, opacity:0.5, }, conditions:{ flex:1, justifyContent:'center', alignItems:'center', alignContent:'center', }, conditionText:{ color:'#666', fontSize:18 } }) export default DocumentStyle

Answer 1

Set flex:1 style to all parents of FlatList and also set contentContainerStyle to FlatList like below:

<FlatList contentContainerStyle={{flexGrow: 1}}
   ...
/>

Answer 2

I think your problem might be related to view hierarchy, your list is children of a LinearGradient component (to have a gradient background I suppose) and LinearGradient is blocking touch events to children views.

To prevent that, add pointerEvents={"none"} prop to LinearGradient .