如何在本机反应中打开半模态?

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>

【讨论】:

好的,我会试试这个并告诉你。非常感谢。 不,它不工作,它是打开的全模式。什么都不会改变,

以上是关于如何在本机反应中打开半模态?的主要内容,如果未能解决你的问题,请参考以下文章

如何防止在android中打开键盘时反应本机模式向上移动?

单击按钮上的关闭模式反应本机

从模态对原始组件反应本机调用函数

如何在本机反应中打开HTTP服务器

如何在反应模式中禁用背景并关闭先前打开的模式

如何在主页中打开后退按钮 android 以退出应用程序并关闭反应本机导航侧菜单