Reactjs 如何在react native modal中调暗背景？

以下是我创建的react本机模式，但仍然找不到如何使背景变暗和在弹出模式周围透明。我不使用任何外部库，并尝试在没有库的情况下找到解决方案。是否可以这样处理

我的模态组件

---

当

Modal

可见时，可以通过编程设置主

视图的不透明度

<View style={[styles.container, this.state.showModal ? {backgroundColor: 'rgba(0,0,0,0.5)'} : '']}>

我通过创建自己的组件MyPopup来解决这个问题，如下所示

class MyPopup extends React.PureComponent {

render() {
    return (
        <Modal 
            animationType="fade"
            transparent={true}
            visible={this.props.visible}
            >
                <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.5)'}}>
                    {this.props.children}
                </View>
        </Modal>
    )
}}

类MyPopup扩展了React.PureComponent{
render（）{
返回(
{this.props.children}
)
}}

然后我就这样用它

<MyPopup visible={this.state.modalVisible}>
<View style={{
    width: '90%',
    height: 50,
    borderColor: '#ccc',
    borderWidth: 1,
    borderStyle: 'solid',
    backgroundColor: 'white',
    elevation: 20,
    padding: 10,
    borderRadius: 4,
}}>
    <Text>Hello, This is my model with dim background color</Text>
</View>


您好，这是我的底色暗淡的模型

我遇到了与您相同的问题，我通过在模态的道具中设置
transparent={true}
并在模态的主视图样式中设置50%的透明度来解决它：
backgroundColor:'rgba（0,0,0,0,0.5）“
我创建了一个容器样式，然后将rgba值应用于
backgroundColor
例如：

modalContainer:{
    flex: 1,
    //backgroundColor: 'transparent',
    backgroundColor: 'rgba(0,0,0,0.7)',
    alignItems: 'center',
    justifyContent: 'center',
},

然后，在模态内部，我创建了带有圆角的实际模态对话框（我通过在模态内容中添加另一个元素实现了这一点，并为其提供了带有圆角的白色背景）。
使用，可以在模态可见时使用backdropOpacity属性使背景变暗

import React, {useState} from 'react';
import {Button, Text, View} from 'react-native';
import Modal from 'react-native-modal';

function ModalTester() {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  render() {
return (
  <View style={{flex: 1}}>
    <Button title="Show modal" onPress={toggleModal} />

    <Modal isVisible={isModalVisible} backdropOpacity={0.3}>
      <View style={{flex: 1}}>
        <Text>Hello!</Text>

        <Button title="Hide modal" onPress={toggleModal} />
      </View>
    </Modal>
  </View>
);
  }
}

export default ModalTester;

import React，{useState}来自“React”；
从“react native”导入{按钮、文本、视图}；
从“反应本机模态”导入模态；
函数ModalTester（）{
常量[isModalVisible，setModalVisible]=使用状态（false）；
常量toggleModal=（）=>{
setModalVisible（！isModalVisible）；
};
render（）{
返回(
你好
);
}
}
导出默认ModalTester；
我设法得到了一个透明的深色背景，当你点击它时，它会关闭模式。

我在modal元素中使用了第一个外部容器，它具有全屏尺寸。
其中，内部容器有一个方框大小，并在屏幕中居中

这里是代码（react:v16.13，react-native:v0.63.2）

请注意，我的
的父元素是我的应用程序的根
，样式为
{flex:1}
必须将statusBarTranslucent道具添加到模态组件中，并将其设置为true。然后您将获得所需的输出。无需将透明道具设置为true或任何其他乏味的样式。
我只需将整个modalView包装在另一个视图中，然后简单地将背景应用于它

<View style={styles.modalbackdrop}>   
   <View style={styles.modalView}></View>
</View>

你试过让模态
透明={false}
吗？是的！！但随后，莫代尔屏幕全屏显示。@AsbarAli-你解决了这个问题吗？谢谢你的回答，我已经试过了。但这没有意义，因为模型的背景是父组件。您在哪里添加了此条件？您需要将其添加到主父级
视图
组件中。不是Modal的
视图
是的，我添加到了主视图中。但是没有任何更改。”“测试屏幕”文本位于父组件上。不在此当前组件中。如果这些文本在当前组件中，它将起作用。这是正确的答案，因为动画的工作顺序与foregroundhi不同，但是模式没有覆盖状态栏。你有解决办法吗？我认为这是最简洁明了的方法。它不影响其他组件，逻辑也很简单。这是一个很好的答案，但请记住，如果你有背景，它将不适用于手机的标题。谢谢。这是最简单、最整洁的解决方案。我发现通过包含组件，我可以用这种方式控制样式层次结构。根据react native docs的说法，只有当模式位于状态栏下时，prop才会更改，问题在于背景。
import React, {useState} from 'react';
import {Button, Text, View} from 'react-native';
import Modal from 'react-native-modal';

function ModalTester() {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  render() {
return (
  <View style={{flex: 1}}>
    <Button title="Show modal" onPress={toggleModal} />

    <Modal isVisible={isModalVisible} backdropOpacity={0.3}>
      <View style={{flex: 1}}>
        <Text>Hello!</Text>

        <Button title="Hide modal" onPress={toggleModal} />
      </View>
    </Modal>
  </View>
);
  }
}

export default ModalTester;

import React from 'react';
import {Modal, Text, TouchableWithoutFeedback, View} from 'react-native';
import {style} from './style';

const MyModal = ({visible, onDismiss}) => {
  return (
    <Modal visible={visible} transparent>
      <TouchableWithoutFeedback onPress={() => onDismiss()}>
        <View style={style.modal}>
          <TouchableWithoutFeedback>
            <View style={style.modalInner}>
              <Text>Something in the modal</Text>
            </View>
          </TouchableWithoutFeedback>
        </View>
      </TouchableWithoutFeedback>
    </Modal>
  );
};

export default MyModal;

import {StyleSheet} from 'react-native';

export const style = StyleSheet.create({
  modal: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },

  modalInner: {
    height: 200,
    padding: 35,
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#FFF',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
});

<View style={styles.modalbackdrop}>   
   <View style={styles.modalView}></View>
</View>

backgroundColor: 'rgba(0, 0, 0, 0.8)',
height: '100%',