서랍 네비게이터가 포함 된 스택 네비게이터 중첩

Question

서랍 네비게이션과 함께 스택 네비게이션을 사용하려고합니다. 기본적으로 서랍은 항상 한 장면에만 있어야합니다. 나는 그렇게하려고 노력했지만 아무 일도 일어나지 않습니다. 나는 내가 뭘 잘못하고 있는지 이해할 수 없다.

피씨 : 나는 네이티브 반응이 좋다.

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

I 비슷한 문제가 있었는데 결국 내가 한 일은 this drawer component을 사용하고 액세스하려는 구성 요소를 감싸는 것이 었습니다. 예를 들어, ConversationListScreen에서만 액세스하려는 경우 <Drawer><ConversationListScreen></Drawer>

Answer 2

내 생각에 스택 탐색기에서 서랍 네비게이터를 장면으로 사용할 수 없습니다. 사용하려는 구성 요소에서 SideNav를 가져 와서 구성 요소로 렌더링해야합니다.

Answer 3

해결 방법은 다음과 같습니다. 우리는 StackNavigator 인 HomeScreenNavigator에 2 개의 화면을 가지고 있습니다. FirstScreen에는 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 
     } 
    } 
    } 
);