TabNavigatorボタンをリアクションナビでモーダル画面にプッシュするにはどうすればいいですか

Question

リアクションナビゲーションタブナビゲータを使用するhttps://reactnavigation.org/docs/navigators/tabタブボタンの1つをフルスクリーンモーダルとしてプッシュするにはどうすればよいですか？スタックナビゲータにはmode=modalオプションがあります。 TakePhotoタブボタンをクリックしたときにそのモードを使用するにはどうすればよいですか？それをクリックすると、下部にタブバーが表示されます。タブバーが離れて行くようにする

const MyApp = TabNavigator({ 
    Home: { 
    screen: MyHomeScreen, 
    }, 
    TakePhoto: { 
    screen: PhotoPickerScreen, // how can I have this screen show up as a full screen modal? 
    }, 
}); 

Answer 1

実は、（このhereについての説明を参照してください）modalにdefaultからその場でのプレゼンテーションの方法を変更するreact-navigationではサポートされていません。私は同じ問題に遭遇したとmodalにnoneとmodeセットにheaderModeセットで非常にトップStackNavigatorを使用して、それを解決：

const MainTabNavigator = TabNavigator(
    { 
     Tab1Home: { screen: Tab1Screen }, 
     Tab2Home: { screen: Tab2Screen } 
    } 
); 

const LoginRegisterStackNavigator = StackNavigator({ 
    Login: { screen: LoginScreen } 
}); 

const ModalStackNavigator = StackNavigator({ 
    MainTabNavigator:   { screen: MainTabNavigator   }, 
    LoginScreenStackNavigator: { screen: LoginRegisterStackNavigator } 
}, { 
    headerMode: 'none', 
    mode:  'modal' 
}); 

これは私が持ってTab1ScreenとTab2Screen中（Reduxのを使用して）次の操作を行うことができます

this.props.navigation.navigate('LoginScreenStackNavigator'); 

Answer 2

一つの方法は、visible: falseでタブバーを非表示にすることです：

const MyApp = TabNavigator({ 
    Home: { 
    screen: MyHomeScreen, 
    }, 
    TakePhoto: { 
    screen: PhotoPickerScreen, 
    navigationOptions: { 
     tabBar: { 
     visible: false, 
     }, 
    }, 
    }, 
}); 

しかし、それは私が望む推測され、フルスクリーンへの移行をトリガしていないようですか？

別のオプションは、新しいStackNavigator内にPhotoPickerScreenをラップし、そのナビゲータをmode = 'modal'に設定することです。

あなたは何とかのTabItemのたonPressからのモーダル（例えば。navigation.navigate('TakePhoto')。）

ノートへのナビゲーションをトリガする必要があるかもしれません、私は、最高のナビゲーションを自分で構築する方法の周りに私の頭をラップしようとしています...

3番目のオプションでは、StackNavigatorを親として実装し、その中に最初のルートとしてMyApp TabNavigatorを追加すると、最も柔軟なソリューションになる可能性があります。その後、TakePhoto画面はTabNavigatorと同じレベルになり、どこからでもそれにルーティングすることができます。

あなたが出てくることを聞いてください！

Answer 3

ドキュメントは一部の地域では斑状ですが、ここにある：

export default class HomeScene extends Component { 

     static navigationOptions = { 
     title: 'foo', 
     header:{ 
        visible: true 
       } 
     } 
     .... 
     } 

私が好きな場所からモーダルビューアップ

Answer 4

これがまだあなたと関連があるのか​​どうかはわかりませんが、これを達成するために私は離れていることがわかりました。

私はtabNavigatorConifgの中でtabBarComponentを使用して動作させることができました。インデックスに応じてタブナビゲーションをナビゲートするのを止めることができます。

tabBarComponent: ({jumpToIndex, ...props, navigation}) => (
     <TabBarBottom 
      {...props} 
      jumpToIndex={index => { 
       if (index === 2) { 
        navigation.navigate('camera') 
       } 
       else { 
        jumpToIndex(index) 
       } 
      }} 
     /> 

    ) 

あなたはこれをやったら、タブのビューの上にモーダルビューを示す私の方法は、stacknavigatiorの内側にTabNavigatorコンテナを置き、そしてちょうどstacknavigatorの内側に新しい画面に移動することでした。