问：DrawerNavigator 中的 ReactNative StackNavigator答案

【问题标题】：Q: ReactNative StackNavigator inside DrawerNavigator问：DrawerNavigator 中的 ReactNative StackNavigator
【发布时间】：2017-05-05 16:54:35
【问题描述】：

在 DrawerNavigator 中，StackNavigator 有什么好的没有错误的例子吗？在我的示例中，当抽屉打开时，顶部导航标题被隐藏，当我在 NewScreen 页面内时，我无法打开抽屉（带幻灯片）。所以我想从任何页面打开标题上方的抽屉。谢谢

http://image.prntscr.com/image/eb4d869acbcf4d22a08159b072aae930.png

这里是代码

import React, { Component } from 'react';
import {
    AppRegistry,
    Button,
    Platform,
    ScrollView,
    StyleSheet,
    TouchableHighlight,
    Text,
} from 'react-native';
import {
    DrawerNavigator,StackNavigator
} from 'react-navigation';

import FontAwesome from "react-native-vector-icons/FontAwesome";

class ScreenHome extends Component{
    static navigationOptions = {
        title: 'ScreenHome',
    };
    render() {
        const { navigate } = this.props.navigation;
        return (
            <Button
                title="Go to Jane's profile"
                onPress={() => navigate('New', { name: 'Jane' })}
            />
        );
    }
}

class NewScreen extends Component{
    static navigationOptions = {
        title: 'New screen',
    };
    render() {
        const { navigate } = this.props.navigation;
        return (
            <Text>Some new screen</Text>
        );
    }
}

class ScreenRegister extends Component{
    static navigationOptions = {
        title: 'ScreenRegister',
    };
    render(){
        return <Text>ScreenRegister</Text>
    }
}

const MainScreenNavigator = DrawerNavigator({
    Recent: {
        screen: ScreenHome
    },
    All: {
        screen: ScreenRegister
    },
});

export default SimpleApp = StackNavigator({
    Home: {
        screen: MainScreenNavigator
    },
    Chat: {
        screen: ScreenHome
    },
    New: {
        screen: NewScreen
    }
});

AppRegistry.registerComponent('naviTest', () => SimpleApp);

【问题讨论】：

Looks to be an open issue。您应该查看 cmets 以了解可能的解决方法，但在阅读完所有这些后，看起来每个解决方案都存在某种错误。

标签： react-native react-navigation

【解决方案1】：

如果我没有正确回答您的问题，您希望：

1) 可以从任何页面访问抽屉

2) 您的抽屉在打开时覆盖标题栏。

实现第一名

有两种方法可以做到，它们是：
a) 添加一个按钮/图标，在点击时触发抽屉。当您使用此解决方案时，您仍然不会拥有从左侧滑动的功能，因为这是由 DrawerNavigator 显式控制的
b) 将 NewScreen 添加到您的抽屉中，因为您希望在屏幕内时可以访问整个抽屉

实现第二名

这是在 StackNavigator 中嵌套 DrawerNavigator 时非常常见的问题。为了解决这个问题，修改 StackNavigator

export default SimpleApp = StackNavigator({
    Home: {
        screen: MainScreenNavigator
    },
    Chat: {
        screen: ScreenHome
    },
    New: {
        screen: NewScreen
    }
},  {
    navigationOptions: { header:  false  }
});

【讨论】：