如何在本机反应中打开半模态? [英] How to open half modal in react native?
问题描述
我正在创建一个 React Native 应用程序,我使用了一个 react-native 模态组件来打开一个模态,我可以使用以下代码打开一个完整的模态.我在下面提到了我的代码示例.现在我想打开一个半模态.
I am creating a react native app and I used a react-native modal component to open a modal and I am able to open a full modal with the following code. I have mentioned my code samples below. Now I wanted to open a half modal.
这是我试过的.
import React from 'react';
import {
StyleSheet,
Text,
View,
ScrollView,
TouchableOpacity,
TextInput,
Image,
Modal,
} from 'react-native';
export default class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
modalVisible: false,
};
}
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerText}>Test Half Modal</Text>
<TouchableOpacity
style={styles.addButton}
onPress={() => {
this.setModalVisible(true);
}}>
<Text style={styles.addButtonText}>Open</Text>
</TouchableOpacity>
</View>
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
// this.closeButtonFunction()
}}>
<View style={styles.footer}>
<Text style={styles.headerText}>This is Half Modal</Text>
</View>
<TouchableOpacity
style={styles.addButton}
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text style={styles.addButtonText}>Close</Text>
</TouchableOpacity>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#98B3B7',
justifyContent: 'center',
},
header: {
flexDirection: 'row',
alignItems: 'center',
},
headerText: {
color: 'black',
fontSize: 18,
padding: 26,
},
noteHeader: {
backgroundColor: '#42f5aa',
alignItems: 'center',
justifyContent: 'center',
borderTopLeftRadius: 50,
borderTopRightRadius: 50,
},
footer: {
flex: 1,
backgroundColor: '#ddd',
bottom: 0,
left: 0,
right: 0,
zIndex: 10,
},
textInput: {
alignSelf: 'stretch',
color: 'black',
padding: 20,
backgroundColor: '#ddd',
borderTopWidth: 2,
borderTopColor: '#ddd',
},
},
addButton: {
position: 'absolute',
zIndex: 11,
right: 20,
bottom: 90,
backgroundColor: '#98B3B7',
width: 70,
height: 70,
borderRadius: 35,
alignItems: 'center',
justifyContent: 'center',
elevation: 8,
},
addButtonText: {
color: '#fff',
fontSize: 18,
},
});
使用上面的代码,我可以打开一个完整的模式.如何使用某些样式或其他样式打开半模态?
Using the above code I am able to open a full modal. How can I open half modal using some styles or something else?
推荐答案
您需要为 Modal 内容提供一个包装视图,并且由于您计划只显示一半的屏幕,因此您必须使其透明.更新模态代码,如下所示.我将背景颜色设置为蓝色,您可以根据需要进行更改.高度设置为 50% 为您想要的一半,而 marginTop 设置为 auto 将其移动到屏幕的下半部分.
You will need a wrapper view for your Modal contents, and as you are planning to display only half the screen you will have to make it transparent. Updating the modal code like below. I put background color as blue you can change it as you want. The height is set to 50% as you wanted half and the marginTop is set to auto which will move it to the bottom half of the screen.
<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
// this.closeButtonFunction()
}}>
<View
style={{
height: '50%',
marginTop: 'auto',
backgroundColor:'blue'
}}>
<View style={styles.footer}>
<Text style={styles.headerText}>This is Half Modal</Text>
</View>
<TouchableOpacity
style={styles.addButton}
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text style={styles.addButtonText}>Close</Text>
</TouchableOpacity>
</View>
</Modal>
这篇关于如何在本机反应中打开半模态?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!