我有以下Modal
,当它不适合屏幕时,我希望其内容可滚动。但是,当设备的窗口较小时,Modal
的内容只会在设备的视图范围之外溢出-某些标头会丢失,并且也是页脚的一部分。
如何激活scrollView,以便将内容包含在设备的视图范围内?
import { Modal, ScrollView } from 'react-native';
<Modal
transparent
animationType="fade"
visible={modalVisible}
onRequestClose={() => {
setModalVisibility(!modalVisible);
}}>
<ScrollView contentContainerStyle={styles.modalOuterContainer}>
.....
</ScrollView>
</Modal>
根据您的要求尝试将模型插入父视图并设置父视图样式。
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>
);
}
}