реагировать на навигацию в полноэкранном режиме из оконного компонента

Question

Как открыть полноэкранный модальный режим из оконного компонента в реагирующей навигации?
Открытый модальный размер всегда имеет тот же размер, что и оконный компонент, из которого модал был перемещен в.

Я создал выставку закусок, чтобы показать проблему здесь: https://snack.expo.io/Bk0N69FwX

Это просто базовый пример, показывающий проблему, в моем реальном проекте компоненты многократно вкладываются, поэтому я не могу легко установить модальность в 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',
  },
});

Answer 1

По вашему требованию вы можете использовать React native Modals.

https://facebook.github.io/react-native/docs/0.56/modal