React-Navigation Drawer and Static Tab-Navigation

Question

나는 반응 네비게이터에서 반응 네비게이션으로 바뀌고있다. 나는이 접근법을 실제로 잘 사용하고 있지만 한 가지 문제로 어려움을 겪고있다.

서랍 내비게이션과 하단 맞춤 탭 탐색을 사용하고 싶습니다. 이 부분은 예상대로 작동하지만 여기에는 문제가 없습니다.

탭이있는 탐색이 앱 전체에서 동일한 동작을하는 3 개의 버튼으로 고정되도록하고 싶습니다. (예 : 대시 보드/검색/즐겨 찾기)

대시 보드에서 한 단계 더 깊게 탐색 할 수 있습니다. 내가 지금하고있는 것처럼 탭의 레이블은 이전에 "대시 보드"가 탐색 된 항목의 이름으로 바뀝니다.

을 명확히하기 위해 Dashboard-Screen-Tab에 스택 탐색 기능을 추가하여 사용자가 해당 페이지를 탐색 할 수 있도록했습니다.

탭 스택 내에서 탐색하는 동안 탭의 조사 및 작업이 변경되는 것을 방지하려면 어떻게해야합니까? 기본적으로 각 화면에서 고정 된 탭 탐색을 원합니다.

이를 달성하기 위해 고정 된보기 구성 요소를 작성해야합니까? 여기

내 설정이다 : App.js

 const MetaTabNavigator = TabNavigator({ 
     Dashboard: { 
      screen: MachineNavigator 
     }, 
     Search: { screen: SearchScreen }, 
     Favourites: { screen: FavouritesScreen }, 
    }, 
     { 
      tabBarPosition: Platform.OS === "ios" ? 'bottom' : 'top', 
      animationEnabled: true, 
      tabBarOptions: { 
       activeTintColor: STYLES.HIGHLIGHT_COLOR 
      }, 
      swipeEnabled: false, 
      backBehavior: 'none' 

     }); 

    const MetaDrawerNavigator = DrawerNavigator({ 
     Home: { 
      screen: MetaTabNavigator, 
      navigationOptions: { 
       drawer: { 
        label: 'Drawer', 
        icon: ({ tintColor }) => <Icon name="rocket" size={24} /> 
       }, 
      }, 
     } 
    }, 
     { 
      contentComponent: props => <Menu {...props} /> 
     } 
    ); 


    AppRegistry.registerComponent('myApp',() => MetaDrawerNavigator); 

MachineNavigator

 const MachineNavigator = StackNavigator({ 
     Main: { 
      screen: MachineOverview, 
      navigationOptions: ({ navigation }) => ({ 
       title: "Dashboard", 
       headerLeft: (
        <TouchableOpacity onPress={() => navigation.navigate("DrawerOpen")}> 
         <IOSIcon name="ios-menu" size={30} /> 
        </TouchableOpacity> 
       ), 
       headerStyle: { paddingRight: 10, paddingLeft: 10 } 
      }) 
     }, 
     Category: { 
      screen: Category, 
      navigationOptions: (props) => ({ 
       title: "Kategorie", 
      }) 
     }, 

     ItemDetail: { 
      screen: ItemDetail, 
      navigationOptions: (props) => ({ 
       title: "Video", 
      }) 
     } 
    }) 

    export default MachineNavigator; 

Answer 1

this issue에 따르면, 당신은 라벨 제어 탭 구성에 tabBarLabel 속성을 추가 할 수 있습니다

을

const MetaTabNavigator = TabNavigator({ 
    Dashboard: { 
     screen: MachineNavigator, navigationOptions: {tabBarLabel: 'Dashboard'} 
    }, 
    ...