Wie mache ich eine TabNavigator Taste, um einen modalen Bildschirm drückt mit React Navigation

Question

der Registerkarte Navigation Navigator Reagieren Mit https://reactnavigation.org/docs/navigators/tab wie kann ich eine der Registerkarte Anstecker drücken Sie den Bildschirm als Vollbild modal up? Ich sehe, dass der Stack-Navigator eine mode=modal Option hat. Wie bekomme ich diesen Modus, wenn ich auf die Registerkarte TakePhoto klicke? Wenn Sie darauf klicken, wird die Tab-Leiste unten immer noch angezeigt.

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

Answer 1

Eigentlich gibt es keine Unterstützung in react-navigation die Art und Weise der Präsentation on the fly von default zu modal (siehe die Diskussion über diese here) zu ändern. Ich lief in das gleiche Problem und löste es durch die Verwendung eines ganz oben StackNavigator mit headerMode Set none und mode Set modal:

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' 
}); 

Dies ermöglicht es mir den folgenden (mit redux) zu tun in Tab1Screen und Tab2Screen zu bringen up der modalen Ansicht von wo auch immer ich will:

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

Answer 2

Eine Möglichkeit, die Tab-Leiste gehen weg zu machen, ist die tabBar mit visible: false zu verbergen:

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

jedoch, dass nicht jeder Übergang auszulösen scheint auf Vollbild, das ich denke, gewünscht wird?

Eine andere Möglichkeit könnte sein, PhotoPickerScreen in einen neuen StackNavigator einzubinden und diesen Navigator auf mode = 'modal' zu setzen.

Sie können die Navigation zu diesem modal von onPress auf dem TabItem irgendwie auslösen (zB. navigation.navigate('TakePhoto').)

Hinweis, ich versuche, meinen Kopf herum zu wickeln, wie am besten die Navigation selbst zu strukturieren, so ...

Die dritte Option, die einen StackNavigator als übergeordnet implementiert und dann den MyApp TabNavigator als erste Route darin hinzufügt, könnte die flexibelste Lösung sein. Dann würde der TakePhoto-Bildschirm auf der gleichen Ebene wie der TabNavigator sein, sodass Sie von überall dorthin routen können.

Interessiert zu hören, was Sie kommen!

Answer 3

Docs sind in einigen Bereichen lückenhaft, aber hier ist es:

export default class HomeScene extends Component { 

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

Answer 4

Nicht sicher, ob dies für Sie noch relevant ist, aber ich habe es geschafft, dies zu erreichen.

So habe ich es geschafft, indem Sie die TabBarComponent in der RegisterkarteNavigatorConifg funktioniert, können Sie die Tab-Navigation von der Navigation abhängig von dem Index zu stoppen.

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

    ) 

Sobald Sie dies getan haben, meine Methode die Ansicht modal der Registeransichten auf der Oberseite zeigt war die TabNavigator innerhalb eines stacknavigatior zu setzen und dann navigieren nur auf einen neuen Bildschirm im Inneren des stacknavigator.