Как сделать кнопку TabNavigator нажать модальный экран с навигацией React

использование вкладки навигации React navigator https://reactnavigation.org/docs/navigators/tab Как сделать одну из кнопок вкладки, чтобы нажать экран вверх как полноэкранный модальный? Я вижу, что у навигатора стека есть . как получить этот режим для использования при нажатии на TakePhoto кнопка tab? При нажатии на него в настоящее время по-прежнему отображается панель вкладок внизу.

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

4 ответов

на самом деле, нет никакой поддержки в реагировать-навигации чтобы изменить способ презентации на лету от default to modal (см. обсуждение об этом здесь). Я столкнулся с той же проблемой и решил ее, используя очень top 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');
13

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

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

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

    )

Как только вы это сделаете, мой метод отображения вида модально поверх представлений вкладок состоял в том, чтобы поместить tabnavigator внутри stacknavigatior, а затем просто перейти к новому экрану внутри о стакнавигаторе.

10

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

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

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

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

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

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

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

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

1

документы в некоторых областях неоднородны, но вот он:

    export default class HomeScene extends Component {

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