Как добавить экран в пользовательскую нижнюю навигацию в React Native

Я никогда не пробовал это делать, но вы, вероятно, сможете это сделать, используя навигатор стека по умолчанию: https://reactnavigation.org/docs/navigating Итак, в чем идея. Вы создаете 5 разных экранов и на каждом из них делаете копию этой панели вкладок. Затем вы пишете условный оператор для каждого возможного случая с помощью navigation.navigate prop. Я думаю, что это единственный способ, но я не знаю, как это повлияет на производительность приложения.

React Navigation Docs действительно полезны. Ознакомьтесь с моим решением здесь.

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

/components/BottomBar/index.js: определите модель навигации и используйте панель вкладок в качестве индивидуального дизайна.

import * as React from "react";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { View } from "react-native";
import  TabBar  from "./Tabbar";
import Screen1 from "../../screens/Screen1";
import Screen2 from "../../screens/Screen2";


export const BottomMenu = () => {
  const Tab = createBottomTabNavigator();
  return (
    
    <View style={{ flex: 1, position: "relative",  justifyContent: 'flex-end'}}>
    
      <Tab.Navigator
        tabBar={(props) => <TabBar {...props} />}
      >
        <Tab.Screen name="screen1" component={Screen1} />
        <Tab.Screen name="screen2" component={Screen2} />
        <Tab.Screen name="screen3" component={Screen1} />
        <Tab.Screen name="screen4" component={Screen2} />
      </Tab.Navigator>     
  
    </View>
   
  );
};

/components/BottomBar/TabBar.js: передайте свойства навигатора статической панели вкладок вместе с информацией о настраиваемых значках.

const { state, descriptors, navigation } = this.props
 :
<StaticTabbar {...{ tabs, value, state, descriptors, navigation }} />  

/components/BottomBar/StaticTabbar.js: использование свойств отображает элементы на панели вкладок.

    const { tabs, value } = this.props;
    const { state, descriptors, navigation } = this.props
    
    return (
      <View style={styles.container}>
        {
          state.routes.map((route, index) => {
            const { options } = descriptors[route.key];
            const tabOption = tabs[index];
              :               
            const key = index;
            return (
              <React.Fragment {...{ key }}>
                <TouchableWithoutFeedback onPress={() => onPress(index)}>
                  <Animated.View style={[styles.tab, { opacity }]}>
                    <Icon name={tabOption.name} color="white" size={28} />
                    <Text style={{ fontSize: 11, color: 'white' }}>{tabOption.text}</Text>
                  </Animated.View>
                </TouchableWithoutFeedback>
                <Animated.View
                  style={{
                    position: "absolute",
                    top: -7,
                    left: tabWidth * index,
                    width: tabWidth,
                    height: 64,   // Tab bar height
                    justifyContent: "center",
                    alignItems: "center",
                    opacity: opacity1,
                    transform: [{ translateY }],
                  }}
                >
                  <View style={styles.activeIcon}>
                    <Icon name={tabOption.name} color="#004c40" size={25} />
                  </View>
                </Animated.View>
              </React.Fragment>
            )
          })}
      </View>
      );