Nano Hash - криптовалюты, майнинг, программирование

Реагируйте на собственный BottomTabNavigator с DrawerNavigator, как держать нижний навигатор видимым все время

Я просмотрел различные сообщения на SO и github о реагирующей навигации, но большинство из них представляют собой комбинацию реагирующего навигатора собственного стека с навигатором ящика. Я не мог найти ничего, что могло бы помочь решить мою проблему.

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

Чего я хочу достичь, так это 1. Сделать так, чтобы навигация по нижней вкладке была видна все время. 2. Когда ящик открыт, меню ящика открывается и не перекрывает нижнюю панель вкладок. 3. И в меню ящика должны быть только те экраны, по которым можно перемещаться из меню ящика.

Ниже мой код навигации,

    import React from 'react'

    // Navigators
    import { DrawerNavigator, StackNavigator, createBottomTabNavigator } from 'react-navigation'

    // TabNavigator screens
    import ProfileConnector from '../connectors/ProfileConnector'
    import InboxConnector from '../connectors/InboxConnector'
    import AttendanceConnector from '../connectors/AttendanceConnector'
    import Results from '../layouts/results/Results'
    import TimetableConnector from '../connectors/TimetableConnector'
    import Icon from 'react-native-vector-icons/Entypo'
    import {Dimensions} from 'react-native'

    const deviceW = Dimensions.get('window').width

    const basePx = 375

    function px2dp(px) {
    return px *  deviceW / basePx
    }

    import Gallery from '../layouts/gallery/Gallery'

    export const Tabs = createBottomTabNavigator({
        Profile: { 
            screen: ProfileConnector,
            navigationOptions: {
                tabBarLabel: 'Profile',
                tabBarIcon: ({tintColor}) => <Icon name="user" size={px2dp(22)} color={tintColor}/>,
            },
        },
        Inbox: { 
            screen: InboxConnector,
            navigationOptions: {
                tabBarLabel: 'Inbox',
                tabBarIcon: ({tintColor}) => <Icon name="inbox" size={px2dp(22)} color={tintColor}/>,
            },
        },
        Attendance: {
            screen: AttendanceConnector,
            navigationOptions: {
                tabBarLabel: 'Attendance',
                tabBarIcon: ({tintColor}) => <Icon name="hand" size={px2dp(22)} color={tintColor}/>,
            },
        },
        Timetable: {
            screen: TimetableConnector,
            navigationOptions: {
                tabBarLabel: 'Timetable',
                tabBarIcon: ({tintColor}) => <Icon name="calendar" size={px2dp(22)} color={tintColor}/>,
            },
        },
        Results: {
            screen: Results,
            navigationOptions: {
                tabBarLabel: 'Results',
                tabBarIcon: ({tintColor}) => <Icon name="bar-graph" size={px2dp(22)} color={tintColor}/>,
            },
        },
    }, {
        initialRouteName: 'Inbox',
        tabBarPosition: 'bottom',
        swipeEnabled: true,
        tabBarOptions: {
            activeTintColor: 'teal',
            inactiveTintColor: '#424949',
            activeBackgroundColor: "white",
            inactiveTintColor: '#424949',
            labelStyle: { fontSize: 14 },
            style : { height : 50}
        }
    });

    export const Drawer = DrawerNavigator({
        Tabs: {screen: Tabs},
        Gallery: { screen: Gallery },
    },{
        drawerWidth: 250,
        drawerPosition: 'left',
        drawerOpenRoute: 'DrawerOpen',
        drawerCloseRoute: 'DrawerClose',
        drawerToggleRoute: 'DrawerToggle',
    })

Кто-нибудь может мне помочь с этим, пожалуйста?

Спасибо, Викрам


Ответы:


1

Ну, я попробовал, и это близко к тому, что вы хотите. Фон DrawerNavigator является прозрачным, а в CustomDrawerContentComponent для представления назначается высота, чтобы сделать нижнюю панель вкладок видимой. Надеюсь, это сработает для вас.

const CustomDrawerContentComponent = (props) => (
    <View style={{height:500}} >
    <ScrollView
              horizontal
              style={{ backgroundColor: 'blue'}}
            ><DrawerItems {...props} />
      </ScrollView>
    </View>
);

const Drawer = createDrawerNavigator({
           Tabs: {screen: Tabs},
           Gallery: { screen: Home },
       },{
          drawerBackgroundColor : 'transparent',
          contentComponent: props => <CustomDrawerContentComponent {...props} />
        }
    )
06.10.2018
  • Спасибо за ответ, но я не уверен, что это решение будет работать для всех размеров экрана. Также, когда я нажимаю на любой из параметров в DrawerItems, он переходит на новый экран, где снова исчезает панель вкладок. Я хочу сделать что-то похожее на приложение LinkedIn. В приложении LinkedIn нижняя панель вкладок доступна независимо от того, где вы находитесь в приложении. И когда вы открываете ящик, он не перекрывается панелью вкладок. Я знаю, что есть способ, при котором навигатор по ящикам хорошо сидит в навигаторе вкладок, просто я не могу понять, как это сделать. 07.10.2018
  • Добро пожаловать. Просто пытался помочь. Когда бы вы ни получили свое решение, поделитесь с нами. Это интересный интерфейс. 14.10.2018
  • @VikramMahishi Вы нашли какое-либо решение или обходной путь. У меня есть подобное требование, если вы можете помочь по моему вопросу здесь stackoverflow.com/questions/60880330/ 28.03.2020

  • 2
  • Вот примерная схема вышеупомянутого варианта использования. 04.04.2019
  • Новые материалы

    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..

    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..