在模态内反应原生 FlatList

Question

I am trying to put a FlatList inside of a Modal but the List just spills out of the containers I have given it rather than scrolling. I have tried adding flex and such, but have had no luck getting the List to stay inside the bounds. Any suggestions?

 Here is the Modal const modalContainer = { flexDirection: 'column', justifyContent: 'center', alignItems: 'center', flex: 1, }; const innerContainer = { alignItems: 'center', // flex: 1, height: 130, backgroundColor: colors.white.white, borderRadius: borderRadius.sm, width: 450, }; render() { const styles = styleMaker(); return ( <View> <Modal visible = {this.props.visible}> <View style={styles.overlay} /> <View style = {styles.modalContainer}> <View style = {styles.innerContainer}> {this.props.children} </View> </View> </Modal> </View> ); }

Answer 1

This worked good for me:

Wrap Flatlist with a ScrollView and a View with onStartShouldSetResponder={(): boolean => true}

full example:

<Modal
   ....>
  <View style={{ height: 300 }}>
    <ScrollView>
      <View onStartShouldSetResponder={(): boolean => true}>
        <FlatList
         ....
          />
      </View>
    </ScrollView>
  </View>
</Modal>

Answer 2

<Modal
    animationType="slide"
    transparent={false}
    visible={this.state.modalVisible}
    onRequestClose={() => this.onRequestClose()}>
    <FlatList
        data={[{ key: 'a' }, { key: 'b' }]}
        renderItem={({ item }) => <Text>{item.key}</Text>}
     />
</Modal>

You can find an example as below link

https://snipsave.com/javawebline/#/snippet/ZYgnr5nu2hHPrM8atX