0

我正在嘗試將堆疊導航與抽屜導航一起使用。基本上我希望抽屜在任何時候都只能在一個場景中。我試圖這樣做,但沒有發生。我無法理解我做錯了什麼。使用抽屜導航器嵌套堆疊導航器

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

回答

0

我有一個類似的問題,我最終做的是使用this drawer component並將其包裝在您想要訪問的組件上。例如,如果只想從ConversationListScreen訪問它,則將其導出爲<Drawer><ConversationListScreen></Drawer>

0

我想你不能在堆棧導航器中將抽屜導航器用作場景。您應該在要使用的組件中導入SideNav並嘗試將其作爲組件進行渲染

+0

如果我將它作爲組件導入,那麼如何顯示和隱藏側欄?你能告訴我一個片段嗎? – Ayan

+0

你是對的。我忘了這個。看看我在這裏發佈的工作解決方案。 – SNT

0

以下是解決方法。我們在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 
     } 
    } 
    } 
); 
+0

我的RouteConfig位於名爲'RouteConfig.js'的文件中,我寧願將所有路線保存在一個地方。我的場景是'ConversationListScreen'是默認的主屏幕。在那裏我想要一個漢堡包菜單來打開和關閉抽屜,但是該菜單不應該放在任何其他頁面上。 – Ayan