在模态内部反应本机 FlatList

React Native FlatList Inside of a Modal

我试图将 FlatList 放入模态框内,但列表只是从我给它的容器中溢出,而不是滚动。我已经尝试添加 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>
    );
  }

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

你可以找到一个例子如下link

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

这对我很有用:

用 ScrollView 包装 Flatlist,用 onStartShouldSetResponder={(): boolean => true}

包装视图

完整示例:

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