Question

我有以下Modal，当它不适合屏幕时，我希望其内容可滚动。但是，当设备的窗口较小时，Modal的内容只会在设备的视图范围之外溢出-某些标头会丢失，并且也是页脚的一部分。

如何激活scrollView，以便将内容包含在设备的视图范围内？

import { Modal, ScrollView } from 'react-native';

<Modal
  transparent
  animationType="fade"
  visible={modalVisible}
  onRequestClose={() => {
    setModalVisibility(!modalVisible);
  }}>
  <ScrollView contentContainerStyle={styles.modalOuterContainer}>
    .....
  </ScrollView>
</Modal>

编辑：

对于任何有相同问题的人。我发现的解决方法是将View内的Modal设置为height: Dimensions.get('window').height,的高度。由于模态似乎具有绝对定位，因此这可能是唯一的方法。但是，这样做的一个缺点是，在大屏幕上您仍然会占用所有空间。当我有一个可以正常运行的修复程序时，我将发布答案。

Answer 1

尝试根据您的要求将模型插入父视图并设置父视图样式。

import React, { Component } from "react";
import { Modal, View, ScrollView } from "react-native";

class ModalExample extends Component {
  state = {
    modalVisible: true
  };

  setModalVisibility = () => {
    this.setState({
      modalVisible: this.state.modalVisible
    });
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Modal
          animationType="fade"
          transparent={true}
          visible={this.state.modalVisible}
          onRequestClose={this.setModalVisibility}
        >
          <ScrollView contentContainerStyle={styles.modalOuterContainer}>
              ...
          </ScrollView>
        </Modal>
      </View>
    );
  }
}

Answer 2

适合我的情况的解决方案是在View内放置一个Modal元素，并将maxHeight设置为maxHeight: Dimensions.get('window').height - 50,。我使用-50只是为了保留一些边距，但这不是必需的。

import { Modal, ScrollView } from 'react-native';

<Modal
  transparent
  animationType="fade"
  visible={modalVisible}
  onRequestClose={() => {
    setModalVisibility(!modalVisible);
  }}>
 <View style={{maxHeight: Dimensions.get('window').height - 50}}
  <ScrollView contentContainerStyle={styles.modalOuterContainer}>
    .....
  </ScrollView>
 </View>
</Modal>

在设备视图之外反应本机模式内容

2 个答案: