Question

如何在React导航中从窗口组件打开全屏模式？
打开的模态的大小始终与从中导航到该模态的窗口组件相同。

我创建了一个零食博览会来在这里展示问题：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

从窗口组件反应导航全屏模式

1 个答案: