Jak ustawić przycisk TabNavigator przesuwanie modalnego ekranu z Nawigacją za pomocą Reakcji

Question

Korzystanie z nawigacji z zakładką Nawigacja w odpowiedzi https://reactnavigation.org/docs/navigators/tab w jaki sposób ustawić jeden z przycisków tabulacji, aby przesunąć ekran w górę w trybie pełnoekranowym? Widzę, że nawigator stosu ma opcję mode=modal. jak uzyskać dostęp do tego trybu po kliknięciu przycisku karty TakePhoto? Kliknięcie go nadal pokazuje pasek kart na dole.

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

Answer 1

Właściwie nie ma wsparcia w react-navigation zmienić sposób prezentacji na bieżąco z default do modal (patrz dyskusja o tym here). Wpadłem na ten sam problem i rozwiązać go za pomocą bardzo top StackNavigator z headerMode zestaw do none i mode zestaw do 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' 
}); 

To pozwala mi zrobić następujące (przy Redux) w Tab1Screen i Tab2Screen przynieść up widok z modalnego gdziekolwiek chcę:

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

Answer 2

Jednym ze sposobów, aby pasek kart odejść jest ukrycie umieszczenie zakładek z visible: false:

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

jednak, że nie wydają się wywołać dowolny przejście do pełnoekranowym, co chyba jest pożądana?

Inną opcją może być owinięcie PhotoPickerScreen wewnątrz nowego StackNavigatora i ustawienie go w tryb = 'modal'.

Można mieć do uruchomienia nawigacji do tego modalnego z onPress na tabItem jakoś (np. navigation.navigate('TakePhoto').)

Note, Próbuję owinąć głowę wokół jak najlepiej strukturze nawigacji siebie, więc ...

Trzecia opcja, implementująca StackNavigator jako obiekt nadrzędny, a następnie dodająca MyApp TabNavigator jako pierwszą trasę wewnątrz niego, może być najbardziej elastycznym rozwiązaniem. Następnie ekran TakePhoto będzie na tym samym poziomie co TabNavigator, pozwalając na kierowanie do niego z dowolnego miejsca.

Zainteresowany, aby usłyszeć, co wymyślisz!

Answer 3

Docs są nierówne w niektórych miejscach, ale tutaj jest:

export default class HomeScene extends Component { 

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

Answer 4

Nie jestem pewien, czy to nadal jest istotne dla Ciebie, ale udało mi się znaleźć, aby to osiągnąć.

Udało mi się sprawić, aby działało, używając tabBarComponent w tabNavigatorConifg, możesz zatrzymać nawigację tabulatorem od nawigacji w zależności od indeksu.

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

    ) 

Gdy już to zrobisz, moja metoda pokazując modally widok na góry poglądów zakładkę umieścić tabnavigator wewnątrz stacknavigatior a potem po prostu przejść do nowego ekranu wewnątrz stacknavigator.