从窗口组件反应导航全屏模式
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
以上是关于从窗口组件反应导航全屏模式的主要内容,如果未能解决你的问题,请参考以下文章
安卓导航组件。显示带有从箭头到十字的变形导航图标的全屏对话框