반응 탐색에 TabNavigator 탭에 대한 onPress가 있습니까?

Question

TabNavigator에서 마지막 탭 (예 : '기타')을 탭하면 DrawerNavigator가 표시됩니다.

어떻게하면 해당 탭에 대한 화면을 표시하지 않고 componentWillMount에서 DrawerNavigator를 호출하지 않고도이 기능을 구현할 수 있습니다.

componentWillMount() { 
    this.props.navigation.navigate("DrawerOpen") 
} 

그것은 내가 생각하는 적절한 솔루션 ('기타'화면이 로딩이 방법)이 아닌 해킹의 일종이다, 그것을위한 더 나은 솔루션이 있어야한다.

Answer 1

이것은 또한 해킹 비트이지만 사용자 지정 TabBar 또는 redux를 사용하지 않고도 가장 간단한 해킹이라고 생각합니다. 당신이 할 수있는 일

가 null

export default class More extends Component { 
    render() { 
    return null; 
    } 
} 

그런 다음 특정 인덱스에 대한 반응-탐색 및 전환 서랍에서 TabNavigator, 수입 TabBars이 화면을 추가 렌더링 화면 구성 요소를 만드는 것입니다. 당신은 간단한 반응 네비게이션에서 기본 TabBars을 계속 사용

import { TabBarBottom, TabBarTop } from 'react-navigation'; 

const TabBar = Platform.OS === 'ios' ? TabBarBottom : TabBarTop; 

const Navigator = TabNavigator({ 
    Tab1: { screen: Tab1 }, 
    Tab2: { screen: Tab2 }, 
    Tab3: { screen: Tab3 }, 
    More: { screen: More } 
}, { 
    tabBarComponent: ({jumpToIndex, ...props, navigation}) => (
     <TabBar 
      {...props} 
      jumpToIndex={index => { 
       if (index === 3) { 
        navigation.navigate('DrawerToggle'); //Toggle drawer 
       } 
       else { 
        jumpToIndex(index) 
       } 
      }} 
     /> 
    ) 
}); 

이 방법은, 당신의 서랍의 아이콘/레이블이 서랍을 전환하는 데 사용합니다.

Answer 2

에 대해 tabBarComponent 사용자 정의를 구현해야합니다. TabNavigator. 옵션에서 제공하는 일반적인 구성 요소입니다.

그런 다음 구성 요소에서 "자세히"버튼에 대해 onPress을 정의하면 서랍이 열립니다.

간단합니다.