Есть ли в реакции-навигации вкладка onPress для TabNavigator?

Я пытаюсь использовать DrawerNavigator, когда пользователь нажимает на последнюю вкладку (например, «Еще») в TabNavigator.

Как этого можно достичь, не имея экрана для этой вкладки, а затем вызывая DrawerNavigator в componentWillMount.

componentWillMount() {
   this.props.navigation.navigate("DrawerOpen") 
}

Это своего рода взлом, который, я думаю, не является правильным решением (таким образом загружается экран «Больше»), для этого должно быть лучшее решение.


react-native reactjs react-navigation tabnavigator
person Nikasv    schedule 03.11.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Это тоже небольшой взлом, но я думаю, что это самый простой способ взлома без использования настраиваемого TabBar или redux.

Что вы можете сделать, так это создать компонент экрана, отображающий null

export default class More extends Component {
  render() {
    return null;
  }
}

Затем добавьте этот экран в свой TabNavigator, импортируйте TabBars из реакции-навигации и переключите ящик для определенного индекса.

import { TabBarBottom, TabBarTop } from 'react-navigation';

const TabBar = Platform.OS === 'ios' ? TabBarBottom : TabBarTop;

const Navigator = TabNavigator({
  Tab1: { screen: Tab1 },
  Tab2: { screen: Tab2 },
  Tab3: { screen: Tab3 },
  More: { screen: More }
}, {
  tabBarComponent: ({jumpToIndex, ...props, navigation}) => (
        <TabBar
            {...props}
            jumpToIndex={index => {
                if (index === 3) {
                    navigation.navigate('DrawerToggle'); //Toggle drawer
                }
                else {
                    jumpToIndex(index)
                }
            }}
        />
    )
});

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

person bennygenel    schedule 03.11.2017
comment
Привет, спасибо за ответ. Я реализовал это, и, похоже, он работает. Одна проблема заключается в том, что когда я нажимаю на последнюю вкладку TabNavigator, меню ящика не открывается (открывается первый экран в DrawerNavigator). Реализация такая же, как вы представили. - person Nikasv; 03.11.2017
comment
Я понял. У меня был StackNavigator вместе со StackNavigator. Пришлось вложить их внутрь DrawerNavigator :) - person Nikasv; 03.11.2017

arrow_upward
0
arrow_downward

Вам необходимо реализовать пользовательский tabBarComponent для TabNavigator. Это обычный компонент, который вы предоставляете в настройках.

Затем в компоненте вы просто определяете onPress для кнопки «Дополнительно», которая открывает ящик.

Это так просто.

person Samuli Hakoniemi    schedule 03.11.2017
comment
Привет, спасибо за ответ. вроде работает. Одна проблема заключается в том, что когда я нажимаю на последнюю вкладку TabNavigator, меню ящика не открывается (открывается первый экран в DrawerNavigator). Любые идеи? - person Nikasv; 03.11.2017