Добавление пользовательской кнопки «Добавить» в createMaterialBottomTabNavigator в реагирующей навигации 5 - PullRequest
Новая
       31

Добавление пользовательской кнопки «Добавить» в createMaterialBottomTabNavigator в реагирующей навигации 5

1 голос
/ 02 марта 2020

Я делаю проект (прореагируйте на родной, экспо, прореагируйте с навигацией 5), в котором я хотел добавить пользовательскую кнопку «Добавить» в нижние вкладки, но так как ...

Навигатор может содержать только компоненты «Экран» в качестве его прямых потомков

... Мне нужно было найти способ передать свой пользовательский компонент.

Казалось, легко достаточно, я имею в виду, есть документы:

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

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

Я решил опубликовать свое решение, если любой в подобном рассоле. Смотрите ответ ниже.

1 Ответ

0 голосов
/ 25 марта 2020

Поместите компонент вне навигатора и поместите его над вкладками с помощью css. Отрегулируйте значки вкладок влево и вправо, как показано в примере.

Как я уже говорил выше, предложения о том, как этого добиться другим способом, горячо приветствуются, но пока не столкнулись с какими-либо проблемами ( стук по дереву).

Вот как это выглядит:

enter image description here

А вот и зайчик: 

import React from 'react';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { Ionicons, MaterialIcons, FontAwesome } from '@expo/vector-icons';

import AddButton from '../../components/UI/AddButton';
import SpotlightProductsScreen from './SpotlightProductsScreen';
import ProductsScreen from './ProductsScreen';
import UserSpotlightScreen from './../user/UserSpotlightScreen';
import UserProductsScreen from './../user/UserProductsScreen';


const ProductsOverviewScreen = props => {

  const Tab = createMaterialBottomTabNavigator();

  return (
    <>
      <AddButton
        navigation={props.navigation}
        style={{
          position: 'absolute',
          zIndex: 99,
          bottom: 5,
          alignSelf: 'center',
          shadowColor: 'black',
          shadowOpacity: 0.15,
          shadowOffset: { width: 0, height: 2 },
          shadowRadius: 8,
          elevation: 3 //Because shadow only work on iOS, elevation is same thing but for android.
        }}
      />
      <Tab.Navigator
        initialRouteName="Spotlight"
        labeled={false}
        shifting={true}
        activeColor="#f0edf6"
        inactiveColor="#3e2465"
        barStyle={{ backgroundColor: 'rgba(127,63,191,.9)' }}
      >
        <Tab.Screen
          name="Spotlight"
          component={SpotlightProductsScreen}
          options={{
            tabBarIcon: ({ color }) => (
              <Ionicons
                name={
                  Platform.OS === 'android'
                    ? 'md-notifications'
                    : 'ios-notifications'
                }
                color={color}
                size={27}
                style={{
                  marginLeft: -35
                }}
              />
            )
          }}
        />
        <Tab.Screen
          name="Förråd"
          component={ProductsScreen}
          options={{
            tabBarIcon: ({ color }) => (
              <MaterialIcons
                name={'file-download'}
                color={color}
                size={27}
                style={{
                  marginLeft: -70
                }}
              />
            )
          }}
        />
        <Tab.Screen
          name="Mitt Förråd"
          component={UserProductsScreen}
          options={{
            tabBarIcon: ({ color }) => (
              <MaterialIcons
                name={'file-upload'}
                color={color}
                size={30}
                style={{
                  marginRight: -70
                }}
              />
            )
          }}
        />
        <Tab.Screen
          name="Min Sida"
          component={UserSpotlightScreen}
          options={{
            tabBarBadge: 4,
            tabBarIcon: ({ color }) => (
              <FontAwesome
                name={'user'}
                color={color}
                size={30}
                style={{
                  marginRight: -35
                }}
              />
            )
          }}
        />
      </Tab.Navigator>
    </>
  );
};

export default ProductsOverviewScreen;
...