时间戳

首页 > 解决方案 > 我将模态的高度设置为更小，但它需要全屏并且不能正确显示

javascript - 我将模态的高度设置为更小，但它需要全屏并且不能正确显示

问题描述

我正在编写一个简单的聊天应用程序，用户可以在其中发送照片。一旦用户单击带有照片的消息，它就会在内部呈现ImageViewer。然后我可以选择保存照片。保存照片后，我想显示“您保存了照片”或类似内容的模式。到现在为止还挺好。但是，带有信息性消息的模式似乎是全屏显示，而不仅仅是一行消息。这是我的代码：

return (
    <>
      
        <Modal
          animationType="slide"
          visible={showImageViewer && savedPhoto}
          onRequestClose={() => {
            setSavedPhoto(false);
          }}
        >
          <View style={styles.modalViewStyle}>
            <Text style={styles.modalTextStyle}>
              Please, dont take the whole screen
            </Text>
          </View>
        </Modal>
    </>
  );

我的进口：

import ImageViewer from "react-native-image-zoom-viewer";
import { GiftedChat } from "react-native-gifted-chat";
import {
  View,
  Text,
  Image,
  Modal,
  TouchableOpacity,
  StyleSheet,
} from "react-native";

我的造型：

const styles = StyleSheet.create({
  image: {
    width: 150,
    height: 100,
    borderRadius: 13,
    margin: 3,
    resizeMode: "cover",
  },
  modalViewStyle: {
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "row",
    borderWidth: 3,
    borderColor: "red",
    height: 40,
    flex: 1 / 10,
  },
  modalTextStyle: {
    fontWeight: "bold",
    color: "green",
    fontSize: 15,
  },
});

标签： javascriptcssreactjsreact-native

解决方案

使模态背景透明并像这样设置子视图的样式

<Modal transparent={true}
   visible={this.state.isVisible}
   onRequestClose={this.closeModal}>
<View style={{
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center'}}>
<View style={{
        width: 300,
        height: 300}}>
  // you modal content here
</View>

推荐阅读