如何在 React Native 模式中调暗背景？

Question

以下是我创建的反应本机模态，仍然找不到如何调暗背景并在弹出模态周围透明。我没有使用任何外部库，并试图在没有库的情况下找到解决方案。是否可以对此进行处理方式？

我的模态组件

render() {
let modal = this.state.modalType=='skill'? <SkillModal /> : <TrialModal />;
return (
  <View style={styles.container}>
    <Modal
      animationType='slide'
      onRequestClose={() => console.log('no warning')}
      presentationStyle="FormSheet"
      transparent
      visible={this.state.showModal}
    >
      <View>
        <View style={styles.modalView} >
          <TouchableOpacity
            onPress={this.closeModalFunc}
          >
            <Text style={styles.closeText}>X</Text>
          </TouchableOpacity>
          <View>
            {modal}
          </View>
        </View>
      </View>
    </Modal>
  </View>
  );
}

模态组件样式

import {StyleSheet} from 'react-native';
import colors from '../../../theme/colors';
import metrics from '../../../theme/metrics';
import {container} from '../../../theme/base';

const styles = StyleSheet.create({
container: {
 backgroundColor: colors.background.gray,
},
modalView: {
 backgroundColor: colors.background.white,
 margin: 40,
},
closeText: {
  backgroundColor: colors.background.purpleishBlue,
  color: colors.background.white,
  borderRadius: metrics.avatar.small,
  width: 32,
  padding: 6,
  alignSelf: 'flex-end',
  textAlign: 'center',
  borderWidth: 1,
  borderColor: colors.background.white,
 },
});

export default styles;

Answer 1

我通过创建自己的组件 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 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>

Answer 2

我遇到了和你一样的问题，我通过在模态的 Props 中设置

transparent={true}

并在模态的主视图样式中设置 50% 透明度来解决它：

backgroundColor: 'rgba(0, 0, 0, 0.5)'

Answer 3

当

View

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

Modal

的不透明度。

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

Answer 4

我设法获得了一个透明的深色背景，当您单击它时它会关闭模式。
我在模态元素中使用第一个外部容器，它具有全屏尺寸。 其中，内部容器具有盒子大小并且位于屏幕中央。

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

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;

onDismiss

是一个回调，用于切换从其父组件赋予此组件的

visible

变量的值。

TouchableWithoutFeedback

在容器上添加

onPress

事件处理。外部响应点击，关闭/关闭模式。内部的不执行任何操作（未给出

onPress

时的默认行为）。

风格：

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,
  },
});

请注意，我的

<MyModal>

的父元素是我的应用程序的根

<View>

，样式为

{flex: 1}

。

Answer 5

我创建了一个容器样式，然后应用了

backgroundColor

的 rgba 值，例如：

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

然后在模态中，我创建了带有圆角的实际模态对话框（我通过在模态内容中添加另一个元素并给它一个带有圆角的白色背景来实现这一点）。

Answer 6

使用 react-native-modal，您可以使用backgroundOpacity 属性在模态可见时使背景变暗

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;

Answer 7

我只是将整个 modalView 包装在另一个视图中，然后简单地对其应用背景

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

并申请以下

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

Answer 8

这对我有用：

<View style={{opacity: modalVisible? 0.5 : undefined}}>
    <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
           setModalVisible(!modalVisible);
        }}>
        ...
    </Modal>
</View>

Answer 9

编写一个这样的组件：

 <>
  {visible && <View style={styles.dimModal} />}
  <Modal
    visible={visible}
    transparent={true}
    statusBarTranslucent={true}
    animationType="slide">
    <TouchableWithoutFeedback onPress={onClose}>
      <View style={styles.container}>
        <TouchableWithoutFeedback>
          <View style={styles.content}>
           {your content}
          </View>
        </TouchableWithoutFeedback>
      </View>
    </TouchableWithoutFeedback>
   </Modal>
  </>

const 样式 = StyleSheet.create({ 容器： { 弹性：1， }, 暗淡模态：{ 位置：'绝对'， 顶部：0， 右：0， 左：0， 底部：0， 背景颜色: 'rgba(0, 0, 0, 0.5)', }, }};

Answer 10

您必须将 statusBarTranslucent 属性添加到 Modal 组件并将其设置为 true。然后你就会得到你想要的输出。无需将 transparent 属性设置为 true 或任何其他繁琐的样式。

Answer 11

React Native 提供了一个可以应用于组件的 prop

activeOpacity={0.9}

您可以设置为任何您想要的