无法在模态中设置FlatList高度

时间:2018-04-25 09:14:20

标签: react-native

通常,FlatList的高度是通过环绕它来设置的。 如果我将它放在react native的模态组件中,这似乎不起作用。

还有其他方法可以设置FlatList的高度吗?

<Modal
visible={visible}
transparent={true}
animationType='slide'
>

<View style={middleInnerContainer}>
    <FlatList
    data={this.props.vegetablesBenefit}
    renderItem={modalBenefitItem}
    keyExtractor={(item) => item.key}
    scrollEnabled
    />
</View>
</Modal>

我已将此代码简化为我正在使用的基本结构。 它在模态之外完美地运行。

1 个答案:

答案 0 :(得分:0)

你能更具体一点吗?如果你想要一个弹出窗口中的列表,你可以简单地使用我编写的以下代码来创建一个通用对话框弹出窗口!

<TouchableWithoutFeedback onPress={() => this.closeDialog()}>
        <Modal
          visible={this.state.showDialog}
          transparent={true}
          onRequestClose={() => this.closeDialog()}
          animationType='slide'>
          {/* tslint:disable-next-line:no-empty */}
          <TouchableWithoutFeedback onPress={() => this.closeDialog()}>
            <View style={styles.parentContainer}>
              <View style={styles.childContainer}>
                <View style={styles.viewContainer}>
                  {/* tslint:disable-next-line:no-empty */}
                  <TouchableWithoutFeedback onPress={() => { }}>
                    <View>
                      <Text style={styles.headerStyle}>{this.props.headerTitle} 
                      </Text>
                    </View>
                  </TouchableWithoutFeedback>
                  {this.renderListComponent()}
                </View>
              </View>
            </View>
          </TouchableWithoutFeedback>
        </Modal>
</TouchableWithoutFeedback>

也可以处理外面的触摸。如果这完成了您的要求,请告诉我。