如何在本机模式中使背景变暗？

IT技术 reactjs react-native

2021-05-09 20:56:28

以下是我创建的 react native Modal，但仍然找不到如何使背景变暗和在弹出模态周围透明。我没有使用任何外部库并试图找到没有库的解决方案。是否可以通过这种方式进行处理?

我的模态组件

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;

4个回答

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

您可以以编程方式设置主视图可见View时的不透明度Modal。

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

我和你有同样的问题，我通过transparent={true}在模态的props中设置并在模态的主视图的样式中设置 50% 的透明度来解决它：backgroundColor: 'rgba(0, 0, 0, 0.5)'

使用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;

其它你可能感兴趣的问题

上一篇打印床向上移动以进行打印下一篇如何在 React JS 中为文本设置颜色