React native 带抽屉导航器的嵌套堆栈导航器

我正在尝试堆栈导航和抽屉导航。基本上，我希望抽屉始终只出现在一个场景中。我试过这么做，但什么也没发生。我无法理解我做错了什么

p.S:我是个新来的本地人

ConversationListScreen.js

import React, { Component } from 'react';
import {
    View,
    Text,
    Button,
    TouchableNativeFeedback,
    Alert,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import styles from './styles';

export default class ConversationListScreen extends Component
{
    static navigationOptions = {
        title: 'Hola',
        headerLeft: (
            <TouchableNativeFeedback onPress={() => Alert.alert('Hi!', 'I am a hamburger.')}>
                <View style={styles.toolBackground}>
                    <Icon name="menu" style={ styles.menuIcon }/>
                </View>
            </TouchableNativeFeedback>
        ),
        headerRight: (
            <TouchableNativeFeedback onPress={() => Alert.alert('Hi!', 'What you want to search?')}>
                <View style={styles.toolBackground}>
                    <Icon name="search" style={ styles.searchIcon }/>
                </View>
            </TouchableNativeFeedback>
        )
    };
    render() {
        return (
            <View>
            </View>
        );
    }
}

import React, { Component } from 'react';
import {
    View,
    Text,
} from 'react-native';

export default class SideNav extends Component
{
    render() {
        return (
            <View>
                <Text>My first Drawer</Text>
            </View>
        );
    }
}

import { StackNavigator, DrawerNavigator } from 'react-navigation';
import ConversationListScreen from './ConversationListScreen';
import Drawer from './Drawer';
import ChatScreen from './ChatScreen';

export const SideNav = DrawerNavigator({
    Drawer: { screen: Drawer},
});

export const Hola = StackNavigator({
    ConversationList: { screen: ConversationListScreen },
    Drawer: { screen: SideNav },
    Chat: { screen: ChatScreen },
});

---

我有一个类似的问题，我最终做的是使用它并将其包装在您想要访问它的组件上。例如，如果您只想从ConversationListScreen访问它，您可以将其导出为

，我想您不能将stack navigator中的抽屉导航器用作场景。您应该在要使用的组件中导入SideNav，并尝试将其呈现为组件

这里有一个解决方法。我们在HomeScreenNavigator中有两个屏幕，这是一个stackNavigator。在firstScreen中，我们有一个到secondScreen的链接。在第二个屏幕中，我们有一个名为ComponentWidthDrawer的屏幕。此组件具有打开抽屉的按钮。我测试了它，它工作了

class FirstComponent extends Component{
  render () {
    return (
      <View>
        <TouchableOpacity onPress={() => 
this.props.navigation.navigate("SecondScreen")}>
          <Text>Go to Second Component</Text>
        </TouchableOpacity>
      </View>
    )
  }
}
class ComponentWidthDrawer extends Component{
  render () {
    return (
      <View>
        <TouchableOpacity onPress={() => this.props.navigation.navigate("DrawerOpen")}>
          <Text>Open Menu</Text>
        </TouchableOpacity>
      </View>
    )
  }
}
const SecondComponent = DrawerNavigator({
  Drawer: {
    screen: ComponentWidthDrawer,
    navigationOptions: {
      drawerLabel: 'Videos'
    },
  }
})

const HomeScreenNavigator = StackNavigator(
  {
    FirstScreen : {
      screen: FirstComponent,
      navigationOptions:{
        header: false
      }
    },
    SecondScreen: {
      screen: SecondComponent,
      navigationOptions:{
        header: false
      }
    }
  }
);

class FirstComponent扩展了组件{
渲染（）{
返回(
this.props.navigation.navigate（“SecondScreen”）}>
转到第二个组件
)
}
}
类ComponentWidthDrawer扩展组件{
渲染（）{
返回(
this.props.navigation.navigate（“drawerropen”）}>
打开菜单
)
}
}
const SecondComponent=DrawerNavigator({
出票人：{
屏幕：组件宽度抽屉，
导航选项：{
抽屉标签：“视频”
},
}
})
const HomeScreenNavigator=StackNavigator(
{
第一屏：{
屏幕：第一个组件，
导航选项：{
标题：false
}
},
第二屏：{
屏幕：第二个组件，
导航选项：{
标题：false
}
}
}
);

如果我将其作为组件导入，那么如何显示和隐藏侧栏？你能给我看一段吗？你说得对。我忘了这个。看看我在这里发布的工作解决方案。我的RouteConfig位于名为

RouteConfig.js

的文件中，我更愿意将所有路由保留在一个位置。我的场景是，

ConversationListScreen

是默认的主屏幕。我想要一个汉堡包菜单，可以打开和关闭抽屉，但该菜单不应位于任何其他页面上。您可以在导航选项中配置标题，因此显示或隐藏汉堡包图标不应阻止您使用它。第一个嵌套屏幕可以是conversationlist，默认情况下它会带您到那里