如何在本机反应中打开半模态?
Posted
技术标签:
【中文标题】如何在本机反应中打开半模态?【英文标题】:How to open half modal in react native? 【发布时间】:2020-09-09 06:39:01 【问题描述】:我正在创建一个 react native 应用程序,我使用 react-native modal 组件打开了一个modal,我可以使用以下代码打开一个完整的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,
,
);
使用上面的代码,我可以打开一个完整的模式。如何使用某些样式或其他方式打开半模态?
【问题讨论】:
所以你需要一个覆盖一半屏幕的模态框? 是的,我需要打开一个覆盖一半屏幕的模式。 【参考方案1】:您需要为您的模态内容提供一个包装视图,并且由于您计划只显示一半屏幕,因此您必须使其透明。更新模态代码,如下所示。我将背景颜色设置为蓝色,您可以根据需要更改它。高度设置为您想要的一半的 50%,marginTop 设置为自动,这会将其移动到屏幕的下半部分。
<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>
【讨论】:
我想知道是否有办法让模态背后的背景稍微变暗。 我放了一个颜色,你可以设置任何你想要的颜色 我不是指模态颜色本身 - 我可以看到你已经设置了蓝色。我的意思是,模态上方的部分。有没有办法设置不透明度,使背景看起来更暗,焦点在模态上?【参考方案2】:你可以这样做:
<Modal isVisible=true
swipeDirection=['up', 'left', 'right', 'down']
style=styles.modalView
>
<View style=styles.containerStyle>
<View style=styles.content>
/**The rest of your code goes here **/
</View>
</View>
</Modal>
并将其样式如下
modalView:
margin: 0,
justifyContent: 'flex-end'
,
containerStyle:
flex: 1,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'flex-end'
,
content:
width: '95%',
height: '50%',
backgroundColor: 'white',
overflow: 'hidden',
,
注意:这里的关键是使用modalView
样式的modal来定位和从下到上展开。
【讨论】:
【参考方案3】:我也遇到了同样的问题,我想出了这个 这里的关键是让外层View的flex为0.5
<Modal
isVisible=modal
style= justifyContent: 'flex-end', margin: 0
onBackdropPress=() => this.setState( modal: false )>
<View style= flex: 0.5, backgroundColor: 'white',justifyContent: 'space-around', alignItems: 'center' >
</View>
</Modal>
【讨论】:
好的,我会试试这个并告诉你。非常感谢。 不,它不工作,它是打开的全模式。什么都不会改变,以上是关于如何在本机反应中打开半模态?的主要内容,如果未能解决你的问题,请参考以下文章