使用抽屜導航器嵌套堆疊導航器

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