在模态内反应原生 FlatList

Question

我试图将 FlatList 放在 Modal 中，但 List 只是从我给它的容器中溢出而不是滚动。 我曾尝试添加 flex 等，但没有运气让 List 保持在边界内。 有什么建议吗？

 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

这对我很有用：

使用 ScrollView 和带有onStartShouldSetResponder={(): boolean => true}的 View 包裹 Flatlist

完整示例：

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

您可以在下面的链接中找到示例

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