使用抽屉导航器嵌套堆叠导航器

Question

我正在尝试将堆叠导航与抽屉导航一起使用。基本上我希望抽屉在任何时候都只能在一个场景中。我试图这样做，但没有发生。我无法理解我做错了什么。

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

Drawer.js

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

RouteConfig.js

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 }, 
}); 

Answer 1

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

Answer 2

我想你不能在堆栈导航器中将抽屉导航器用作场景。您应该在要使用的组件中导入SideNav并尝试将其作为组件进行渲染

Answer 3

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

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