React Native Modal：透明背景和布局问题

Posted 2023-02-16

【中文标题】React Native Modal：透明背景和布局问题

【英文标题】：React Native Modal: Transparent Background & Layout Problem

【发布时间】：2020-03-18 11:52:04

【问题描述】：

我用的是React Native Modal，我想要Modal的背景 是透明的，我希望模态显示代表 屏幕

如何达到同样的要求，哪里出错了？

下面是相同的代码，请看一下：

import React,  Component  from 'react'
import  Modal, View, Text, Dimensions, Platform, TouchableOpacity, Alert, StyleSheet, Button  from 'react-native'
import Icon from 'react-native-vector-icons/Entypo'

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

export class MyComponent extends Component 

    render = () => 
    const message = 'Do you want to upload the video now or wait until you are connected to wi-fi?'
    return (
      <Modal
        animationType='slide'
        transparent=true
        style=backgroundColor: 'black'
      >
        <View style=styles.content>
          <View style=styles.closeBtn>
            <TouchableOpacity onPress=() => this.props.navigation.navigate('PreInspection_VideoPlayer') style=styles.closeBtn>
              <Icon name="cross" color="#000" size=26 />
            </TouchableOpacity>
          </View>
          <Text style=
            fontSize: 18,
            fontFamily: 'Montserrat-Bold',
            paddingTop: Platform.OS === 'android' ? 40 : 20,
            paddingVertical: 10
          >Warning! ????</Text>
          <View style= paddingHorizontal: 40 >
            <Text style= fontSize: 18, justifyContent: 'center', alignItems: 'center', textAlign: 'center' >message</Text>
          </View>

          <Button
            title='Upload My Video'
            style=styles.bigButtons
            onPress=() =>  Alert.alert('Uploading Video') 
          />
          <Button
            title='Upload Video Later'
            style=styles.bigButtons
            onPress=() =>  Alert.alert('Uploading Video Later') 
          />
        </View>
      </Modal>
    )
  


const styles = StyleSheet.create(
  closeBtn: 
    padding: 10
  ,
  bigButtons: 
    width: 240,
    marginTop: 20
  ,
  content: 
    backgroundColor: 'red',
    width: windowWidth * 0.8,
    height: windowHeight * 0.7,
    alignSelf: 'center',
    top: windowHeight * 0.15,
    borderRadius: windowHeight * 0.03,
    alignItems: 'center',
    justifyContent: 'center'
  ,
)

任何帮助将不胜感激。在此先感谢:)

【参考方案1】：

您可以通过React Native Community Modal轻松实现这一目标

这是一个例子：

import React,  useState  from "react";
import  Text, View, Dimensions  from "react-native";
import Modal from "react-native-modal";

const  width: ScreenWidth, height: ScreenHeight  = Dimensions.get("window");

const ModalExample = props => 
  const [visibility, setVisibility] = useState(true);
  return (
    <View>
      <Modal
        backdropColor="transparent"
        isVisible=visibility
        style=
          alignItems: "center",
          justifyContent: "center"
        
        onBackdropPress=() => setVisibility(false)
      >
        <View
          style=
            borderRadius: 16,
            alignItems: "center",
            justifyContent: "center",
            width: ScreenWidth * 0.7,
            backgroundColor: "#fdfdfd",
            height: ScreenHeight * 0.5
          
        >
          <Text>I am the modal content!</Text>
        </View>
      </Modal>
    </View>
  );
;

export default ModalExample;

【讨论】：

当我点击运行代码 sn-p 时它会刹车。看到输出会很棒。但我现在仍然会实施并检查。

这只是为了更好地突出显示代码 :) 它无法在 Web 浏览器上运行 :( 我建议你使用 react-native-modal。它是 react-native 模式的包装器，但它们已修复很多问题。

我希望模态显示在屏幕顶部，我希望模态是透明的，以便我看到它后面的另一个屏幕。从我现在看到的情况来看，模态有自己的视图，它会阻止应该出现在它后面的屏幕。请帮帮我

其实我真的不明白你想要什么。你能上传一张你想要什么的照片吗？实际上，您可以使用 RN Modal 制作任何东西。

一定要给我发个邀请