Как сделать кнопку TabNavigator нажатием модального экрана с помощью React Navigation

Question

Использование навигационной навигационной панели навигации https://reactnavigation.org/docs/navigators/tab Как сделать одну из кнопок табуляции, нажимая экран в полноэкранном режиме? Я вижу, что у навигатора стека есть опция 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

На самом деле, нет никакой поддержки в react-navigation изменить способ представления на лету из default в modal (см обсуждение этого here). Я столкнулся с той же проблемой и решить ее с помощью очень верхнего StackNavigator с headerMode набор для none и mode набор для 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' 
}); 

Это позволяет мне сделать следующее (используя Redux) в Tab1Screen и Tab2Screen принести до модального вида из куда я хочу:

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

Answer 2

Один из способов сделать панель вкладок уйти, чтобы скрыть TabBar с visible: false:

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

Однако, это не похоже, чтобы вызвать какой-либо переход в полноэкранный режим, который я думаю, желателен?

Другим вариантом может быть обернуть PhotoPickerScreen внутри нового StackNavigator и установить этот навигатор в режим = 'модальный'.

Вы, возможно, придется запустить навигацию к этому модальный из onPress на TabItem каким-то образом (например. navigation.navigate('TakePhoto').)

Примечание, я пытаюсь обернуть вокруг головы, как лучше структурировать навигацию себя, так что ...

Третий вариант, реализующий StackNavigator как родительский элемент, а затем добавление в качестве первого маршрута внутри него TabNavigator MyApp может быть самым гибким решением. Тогда экран TakePhoto будет находиться на том же уровне, что и TabNavigator, позволяя вам маршрутизировать его туда, где бы вы ни находились.

Заинтересованы в том, чтобы услышать, что вы придумали!

Answer 3

Docs является неоднородным в некоторых областях, но здесь это:

export default class HomeScene extends Component { 

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

Answer 4

Не уверен, что это все еще актуально для вас, но мне удалось найти его, чтобы достичь этого.

Так что мне удалось заставить его работать с помощью tabBarComponent внутри tabNavigatorConifg, вы можете остановить навигацию на вкладке от навигации в зависимости от индекса.

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

    ) 

После того, как вы сделали это, мой метод, показывающий вид модально поверх взгляды закладок был поставить TabNavigator внутри stacknavigatior, а затем просто перейти на новый экран внутри stacknavigator.