反应导航模式高度 [英] React Navigation modal height

问题描述

如何设置反应导航模式视图的高度，所以一旦它出现，它将仅覆盖大约一半的屏幕从下向上，并且下面的视图仍然可见?

How do I set the height a React Navigation modal view so once it has appeared it will only cover about half of the screen from the bottom up, and the view below remains visible?

更新:我正在尝试创建类似于App Store购买模式的ux流，其中某种形式的StackNavigator嵌套在填充屏幕下半部分的模式中.

Update: I'm trying to create a ux flow similar to the App Store purchase modal, where some kind of StackNavigator is nested in a modal that fills the bottom half of the screen.

推荐答案

在堆栈导航器中，您可以设置以下选项:

In your stacknavigator you can set these options:

  mode: 'modal',
    headerMode: 'none',
    cardStyle:{
      backgroundColor:"transparent",
      opacity:0.99
  }

在您的模式屏幕中:

class ModalScreen extends React.Component {

  render() {
    return (
      <View style={{ flex: 1 ,flexDirection: 'column', justifyContent: 'flex-end'}}>
          <View style={{ height: "50%" ,width: '100%', backgroundColor:"#fff", justifyContent:"center"}}>
            <Text>Testing a modal with transparent background</Text>
          </View>
      </View>
    );
  }
}

您还可以参考此博览会小吃 https://snack.expo.io/@yannerio/我创建的模式以显示其工作方式，或者您可以使用反应本机模式

Also you can refer to this expo snack https://snack.expo.io/@yannerio/modal that I've created to show how it works, or you could use React Native Modal

这篇关于反应导航模式高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！