Question

在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);

Answer 1

如果我正确地提出了您的问题，您需要：

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

2）打开时抽屉盖住标题栏。

达到数字

有两种方法可以做到，它们是：
a）添加一个按钮/图标，在点击时触发抽屉。当您使用此解决方案时，您仍然没有左侧功能的幻灯片，因为这是由DrawerNavigator明确控制的 b）将NewScreen添加到抽屉，因为当您在屏幕内时想要访问整个抽屉

达到2号

在StackNavigator中嵌套DrawerNavigator时，这是一个非常常见的问题。要解决此问题，请修改StackNavigator

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

问：DrawerNavigator中的ReactNative StackNavigator

1 个答案: