在模态框内响应 Native FlatList

Question

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

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 和 View 包裹 FlatlistonStartShouldSetResponder={(): boolean => true}

完整示例：

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