Reactnative reactnavigation模式高度

发布于02月27日

如何设置React Navigation模式视图的高度，使其一旦出现，从下到上只覆盖大约一半的屏幕，而下面的视图仍然可见？

Update:我试图创建一个类似于App Store购买模式的ux流，其中某种StackNavigator嵌套在填充屏幕下半部分的模式中.

推荐答案

在stacknavigator中，可以设置以下选项:

  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/modal来展示它的工作原理，或者你可以使用React Native Modal