当反应本机模式打开时，使背景深灰色

Question

我正在使用一种反应的模态，并且在打开时，我正试图使背景变暗为深灰色。我似乎无法做到这一点！我尝试在打开模态时尝试添加主视图，并将其背景色设置为深灰色，但行不通。我还尝试将模态的背景色打开时为深灰色 - 也不起作用。我该如何实现这一目标？这是我的代码：

链接到小吃： https://snack.expo.expo.dev/@steph510 /simple-modal

app.js

import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import Sortby from './components/Sortby';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {

   state = {    
    showSortby: false,
  };

  startSortByHandler = () => {
    this.setState({
      showSortby: true,
    });
  };

  endSortByHandler = () => {    
    this.setState({
      showSortby: false,
    });
  };

  getSortValues = () => {
    this.endSortByHandler()  
  }

  getShowInGridViewList = () => {   
    const gridFieldArray = [
      {"text":"Organization","key":"0.7204364607892255"},
      {"text":"Document No","key":"0.11948720939854396"},
      {"text":"Warehouse","key":"0.5981352662697218"},
      {"text":"Business Partner","key":"0.3617080891091381"},
      {"text":"Partner Address","key":"0.9242697027340077"},
      {"text":"Movement Date","key":"0.19100558269330914"}] 
    return gridFieldArray;
  };

  render() {
  return (
    <View style={styles.container}>     
      <Card>  
        <Sortby
          visible={this.state.showSortby}
          onCancel={this.endSortByHandler}
          showInGridViewList={this.getShowInGridViewList}     
          onOK={this.getSortValues}     
        ></Sortby>       
        <Button title={'Open Modal'} onPress={this.startSortByHandler}></Button>        
      </Card>
    </View>
  );
}
}

const styles = StyleSheet.create({

  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,    
     backgroundColor: '#FFFFCC',
    padding: 8,
  } 
});

sortby.js

import React from "react";
import {View, Text, Modal, StyleSheet, Button, FlatList,} from "react-native";
import { RadioButton } from "react-native-paper";

export default class Sortby extends React.Component {
  constructor(props) {
    super(props);
  }

  state = { 
    selectedIndex: 0,
    radioButtonValue: 'asc',     
  }; 

 onRadiochange = (index, value) => {
    this.setState({ 
      radioButtonValue: value,   
      selectedIndex: index   
    });
  };

  render() {
    return (
    
      <Modal visible={this.props.visible} transparent={true}>
        <View style={styles.modalStyles}>     
          <View style={styles.fieldsContainer}>
            <FlatList
              data={this.props.showInGridViewList()}
              extraData={this.state}
              renderItem={(itemData) => {
                const index = itemData.index;              
                return (
                  <View style={styles.fieldItem}>
                    <Text style={styles.fieldText}>{itemData.item.text}</Text>
                    <View style={styles.radioButtonContainer}>
                    <RadioButton.Group onValueChange={value => this.onRadiochange(index, value)}>
                      <View style={styles.singleRadioButtonContainer}>
                        <Text>Asc</Text>
                        <RadioButton
                          color='#5d86d7'                        
                          value="asc"                      
                          status={ this.state.selectedIndex === index && this.state.radioButtonValue === 'asc' ? 'checked' : 'unchecked'}

                        />
                      </View>
                      <View style={styles.singleRadioButtonContainer}>
                        <Text>Desc</Text>
                        <RadioButton
                          color='#5d86d7'                        
                          value="desc"                      
                          status={ this.state.selectedIndex === index && this.state.radioButtonValue === 'desc' ?  'checked' : 'unchecked'}      
                        />
                      </View>
                      </RadioButton.Group>
                    </View>
                  </View>
                );
              }}
              alwaysBounceVertical={false}
            />
          </View>
          <View style={styles.buttonContainer}>
            <View style={styles.button}>
              <Button title="OK" color={"#5d86d7"}  onPress={this.props.onOK}></Button>         
            </View>
            <View style={styles.button}>
              <Button
                title="Cancel"
                color={"#5d86d7"}
                onPress={this.props.onCancel}
              ></Button>
            </View>
          </View>
        </View>
      </Modal>
     
    );
  }
}

const styles = StyleSheet.create({

  modalStyles: {
    height: "auto",
    width: "90%",
    flexDirection: "column",
    justifyContent: "flex-start",
    alignItems: "center",
    backgroundColor: "#fff",
    borderColor: "#777",
    borderWidth: 1,
    
    marginLeft: 20,
   
  },
  fieldsContainer: {
    width: "100%",
  },
  fieldItem: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingLeft: 12,
    borderBottomWidth: 1,        
    borderBottomColor: "#ebebeb",
  },
  fieldText: {
    color: "#444",
  },
  radioButtonContainer: {
    flexDirection: "row",   
    justifyContent: "flex-start",
    alignItems: "center",
  
  },
  singleRadioButtonContainer: {
    flexDirection: "row",
    justifyContent: "center",
   
    alignItems: "center",
    marginRight: 10,
    
  }, 
  buttonContainer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
 
  },
  button: {
    width: "100%",
    marginHorizontal: 8,
  },
});

Answer 1

我已经创建了一个容器样式，然后将RGBA值应用于背景彩色，例如：

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

然后在模态内创建了我的实际模态对话框。

Answer 2

这是我发现的解决方案：

来自React-Native的模式不直接支持这一点，因为在他们的文档中，他们没有提及这样的东西。
但是，您可以检查此 library ，我使用了多次，您可以自定义。

Answer 3

您是否尝试过CustomBackdrop Prop？

  <Modal 
    visible={this.props.visible}
    statusBarTranslucent={true}
    customBackdrop={<View style={{backgroundColor: '#FFFFCC'} />}
    >