我使用的是react-native Modal，我试图让背景在打开时变暗为深灰色。我似乎不能让它这样做!我试过添加一个主视图，并在模式打开时将其背景色设置为深灰色，但它不起作用。我也试过将Modal的背景色设置为深灰色，当它打开时-也不起作用。请问我怎样才能做到这一点?这是我的代码:
零食链接:https://snack.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,
},
});
我已经创建了一个容器样式，然后我为backgroundColor应用了rgba值，例如:
modalStyles:{
flex: 1,
//backgroundColor: 'transparent',
backgroundColor: 'rgba(0,0,0,0.7)',
alignItems: 'center',
justifyContent: 'center',
},
然后在模态中我创建了实际的模态对话框。
我找到了一个解决方案:https://snack.expo.dev/C1gQM9bvD
我认为react-native的Modal不直接支持这个，因为在他们的文档中没有提到这样的事情。然而，你可以检查这个库，我用过很多次，你可以自定义它。
你试过custombackground道具了吗?
<Modal
visible={this.props.visible}
statusBarTranslucent={true}
customBackdrop={<View style={{backgroundColor: '#FFFFCC'} />}
>