React native 从窗口组件响应导航全屏模式

如何在react navigation中从窗口组件打开全屏模式？
打开的模式始终与窗口组件的大小相同，模式是从窗口组件导航到窗口组件的

我创建了一个快餐博览会来展示这个问题：

这只是一个显示问题的基本示例，在我的实际项目中，组件嵌套了很多次，因此我无法轻松地在顶层StackNavigator中设置模式，并从深度嵌套的组件导航到它

import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { Constants } from 'expo';

import { createStackNavigator } from 'react-navigation';


// modal that should be rendered full screen
class Modal extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>
          This should be a full screen modal
        </Text>
      </View>
    )
  }
}

// windowed component, from which the modal will be navigated to
class NestedComponent extends React.Component {
  render() {
    return (
      <View style={styles.nestedContainer}>
        <Text style={styles.text}>
          nested component
        </Text>
        <Button
         onPress={() => this.props.navigation.navigate('modal')} 
         title="open modal" 
        />
      </View>
    )
  }
}

const ModalStackComponent = () => {
  return (
    <ModalStackNavigator />
  )
}

const ModalStackNavigator = createStackNavigator(
  {
    nestedComponent: {
      screen: NestedComponent,
      navigationOptions: {
      header: null,
    },
  },
    modal: {
      screen: Modal,
    },
  },
  {
    mode: 'modal',
  }
)

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>

        // some stub container to limit screen size for nested component
        <View style={styles.upperComponentContainer}>
          <Text style={styles.text}>
            upper component
          </Text>
        </View>

        <ModalStackComponent />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  upperComponentContainer: {
    flex: 1, 
    backgroundColor: 'lightgrey', 
    justifyContent: 'center', 
  },
  nestedContainer: {
    flex: 1,
    justifyContent: 'center',
  },
  text: {
    textAlign: 'center',
    fontSize: 20,
    color: 'black',
  },
});

import*as React from'React'；
从“react native”导入{文本、视图、样式表、按钮}；
从“expo”导入{Constants}；
从“反应导航”导入{createStackNavigator}；
//应全屏显示的模式
类Modal扩展了React.Component{
render（）{
返回(
这应该是一个全屏模式
)
}
}
//窗口组件，模式将从中导航到
类NestedComponent扩展了React.Component{
render（）{
返回(
嵌套组件
this.props.navigation.navigate（'modal'）}
title=“打开模式”
/>
)
}
}
const ModalStackComponent=（）=>{
返回(
)
}
const ModalStackNavigator=createStackNavigator(
{
嵌套组件：{
屏幕：嵌套组件，
导航选项：{
标题：null，
},
},
模态：{
屏幕：模态，
},
},
{
模式：“模态”，
}
)
导出默认类App扩展React.Component{
render（）{
返回(
//一些存根容器限制嵌套组件的屏幕大小
上部构件
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“拉伸”，
为内容辩护：“中心”，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
},
上部组件容器：{
弹性：1，
背景颜色：“浅灰色”，
为内容辩护：“中心”，
},
嵌套容器：{
弹性：1，
为内容辩护：“中心”，
},
正文：{
textAlign:'中心'，
尺寸：20，
颜色：'黑色'，
},
});

对于您的需求，您可以使用React-native模态

---

根据您的需求，您可以使用React-native模态

---

谢谢，我知道，这个选项也存在，但我更希望stackNavigator中的标准标题作为modal的标题，这样它在整个应用程序中看起来都是一致的。我试图重新设计标题，但没有成功。谢谢，我知道，这个选项也存在，但我更喜欢使用stackNavigator中的标准标题作为模式的标题，因此它在整个应用程序中看起来都是一致的。我试图改造头球，但没有成功。