ネストされたナビゲータの特定の画面にあるときに親TabNavigatorのスワイプを無効にする

Question

私のアプリ用にネストされたナビゲータを実装しようとしています。 アプリの構造はとてもシンプルです。

RootNavigation(TabNavigator): 
    - Camera 
    - HomeNavigation (TabNavigator) 
    - MessagesList 

したがって、アプリはデフォルトではHomeNavigationで表示されます。左にスワイプしてCameraを入力し、右にスクロールしてMessagesListにスワイプします。 HomeNavigationは、さらに次のように分割され

は今：このナビゲータで

HomeNavigation (TabNavigator): 
    - News Feed List 
    - NotificationsList 
    - Search News 

、News Feed Listはデフォルトで表示されます。今私がNotificationsListまたはSearch NewsにHome Navigationを入力したとき。左または右にスワイプすると、私は欲しくないCameraとMessagesListになります。私はNews Feed Listにいるときだけこの機能が必要です。今私はドキュメントを読んでいたが、RootNavigation (Parent Navigator) from inside the childでスワイプを無効にする方法をかなり理解できなかった。開発段階の後半では、News Feed ListはStackNavigatorに変換され、ユーザーは各ニュース項目を選択して詳細に読むことができます。私はまた、NewsFeedListで深く進むと無効にしたいと思っています。

たぶん、このコードは、より良い私の状況を理解するのに役立ちます：

HomeNavigationConfigurtation：

const homeNavigationConfiguration = { 
    TabOneNavigation: { 
     screen: FeedScreen, 
     navigationOptions: { 
      tabBarLabel: 'Home', 
      tabBarIcon: ({ tintColor, focused }) => { 
       return (
        <Ionicons 
         name={focused ? 'ios-home' : 'ios-home-outline'} 
         size={30} 
         style={{ color: tintColor }} 
        /> 
       ); 
      } 
     } 
    }, 
    TabTwoNavigation: { 
     screen: SearchTab, 
     navigationOptions: { 
      tabBarLabel: 'Search', 
      tabBarIcon: ({ tintColor, focused }) => { 
       return (
        <Ionicons 
         name={focused ? 'ios-search' : 'ios-search-outline'} 
         size={30} 
         style={{ color: tintColor }} 
        /> 
       ); 
      } 
     } 
    }, 
    TabThreeNavigation: { 
     screen: NotificationTab, 
     navigationOptions: { 
      tabBarLabel: 'Notify', 
      tabBarIcon: ({ tintColor, focused }) => { 
       return (
        <Ionicons 
         name={focused ? 'ios-list' : 'ios-list-outline'} 
         size={30} 
         style={{ color: tintColor }} 
        /> 
       ); 
      } 
     } 
    } 
}; 

const tabBarConfiguration = { 
    //...other configs 
    tabBarComponent: TabBarBottom, 
    tabBarPosition: 'bottom', 
    swipeEnabled: false, 
    animationEnabled: false, 
    lazy: true, 
    tabBarOptions: { 
     showIcon: true, 
     showLabel: false, 
     activeTintColor: '#347FC4', 
     inactiveTintColor: '#929AA1', 
     activeBackgroundColor: '#FFF', 
     inactiveBackgroundColor: '#FFF' 
    } 
}; 

export const HomeNavConfiguration = TabNavigator(routeConfiguration, tabBarConfiguration); 

HomeNavigation：

class HomeNavigationextends Component { 
    render() { 
     const { dispatch, navigationState } = this.props; 
     return (
      <HomeNavigationConfiguration 
       navigation={ 
        addNavigationHelpers({ 
         dispatch, 
         state: navigationState, 
        }) 
       } 
      /> 
     ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
     navigationState: state.homeNavState, 
    }; 
}; 

export default connect(mapStateToProps)(HomeNavigation); 

HomeNavigationReducer：

export default (state, action) => { 
    if (action.type === 'JUMP_TO_TAB') { 
     return { ...state, index: 0 }; 
    } 
    return HomeNAvigationConfig.router.getStateForAction(action, state); 
}; 

RootNavigationConfiguration：

const routeConfiguration = { 
    RootNavigationScreenLeft: { 
     screen: CameraScreen, 
     navigationOptions: { 
      tabBarVisible: false 
     } 
    }, 
    RootNavigationScreenMiddle: { 
     screen: RootTab, 
     navigationOptions: { 
      tabBarVisible: false 
     } 
    }, 
    RootNavigationScreenRight: { 
     screen: MessagesListScreen, 
     navigationOptions: { 
      tabBarVisible: false 
     } 
    } 
}; 

const tabBarConfiguration = { 
    //...other configs 
    swipeEnabled: true, 
    animationEnabled: true, 
    lazy: true, 
    initialRouteName: 'RootNavigationScreenMiddle' 
}; 

export const RootNavigationConfig = TabNavigator(routeConfiguration, tabBarConfiguration); 

ルートナビゲーション

class RootNavigationextends React.Component { 
    render() { 
     const { dispatch, navigationState } = this.props; 
     return (
      <RootNavigationConfig 
       navigation={ 
        addNavigationHelpers({ 
         dispatch, 
         state: navigationState, 
        }) 
       } 
      /> 
     ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
     navigationState: state.rootNavState, 
    }; 
}; 

export default connect(mapStateToProps)(RootNavigation); 

任意のソリューションやアドバイスが高く評価されます。 :)

Answer 1

UXの観点からは、ユーザーは混乱するかもしれません。あなたが基本的にしているのは、

RootNavigation (TabNavigator) 
- Camera 
- News Feed List 
- NotificationsList 
- Search News 
- MessagesList 

あなたのケースではどうすればいいですか？あなたの質問については

RootNavigation(StackNavigator): 
    - Camera 
    - HomeNavigation (TabNavigator) 
    - MessagesList 

HomeNavigation (TabNavigator): 
    - News Feed List 
    - NotificationsList 
    - Search News 

、

私はNews Feed List

にいるときに、セットアップあなたのナビゲーションを、それはあなたがフォームにTabNavigator(RouteConfigs, TabNavigatorConfig)

を取るとき、私はこれだけの機能が欲しいですnavigationOptionsをRouteConfigsとTabNavigatorConfigの両方に渡すことができます。各screenオブジェクトで指定するnavigationOptionsは、navigationOptionsをTabNavigatorConfigに上書きできます。基本的には、すべての画面の一般設定をTabNavigatorConfignavigationOptionsとscreen-specificからRouteConfigsnavigationOptionsに渡します。