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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从窗口组件反应导航全屏模式相关的知识,希望对你有一定的参考价值。

如何在反应导航中从窗口组件打开全屏模式? 打开的模态总是与窗口组件的大小相同,模态被导航到该窗口组件。

我创建了一个小吃博览会来展示这里的问题: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',
  },
});
答案

根据您的要求,您可以使用React native Modals。

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

以上是关于从窗口组件反应导航全屏模式的主要内容,如果未能解决你的问题,请参考以下文章

Android 全屏片段不显示导航和状态栏后面的元素

安卓导航组件。显示带有从箭头到十字的变形导航图标的全屏对话框

如何以编程方式将窗口从全屏切换到正常模式?

使用Android导航组件时如何从后台获取片段?

从活动向上导航到片段打开相同的片段 - Android 导航组件

如何使用导航架构组件从片段中获取结果?