Пользовательское меню навигатора в React Native

Не уверен, что вы имеете в виду, но я думаю, вы могли бы попробовать что-то вроде этого:

const CustomDrawer = createDrawerNavigator({
  Screen1: {
    screen: Screen1,
  },
  Screen2: {
    screen: Screen2,
  },
})

const RootNavigator = createStackNavigator({
  MainScreen: {
    screen: MainScreen,
  },
  CustomDrawer: { screen: CustomDrawer }
},
{
  initialRouteName: 'Init',
})

В принципе, вы можете создать ящик справа / слева. И добавьте на него свои 5 экранов, затем вы будете использовать ящик для навигации между этими экранами. Кроме того, вы создадите экземпляр своего ящика в stackNavigator, который будет обрабатывать навигацию. Вы также можете установить на нем свой главный экран и все остальное.

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

используйте createDrawerNavigator, он предлагает вам индивидуальный дизайн боковой панели

createDrawerNavigator({
    screen: {..your screen stack here...}
}, {
  headerMode: 'none',
  gesturesEnabled: false,
  contentComponent: DrawerContainer, /// DrawerContainer is custom component container for all tabs
  drawerBackgroundColor: 'transparent',
  drawerWidth: 240,
  useNativeAnimations: true
});

DrawerContainer .js: ---

export default class DrawerContainer extends React.Component { 
 render() {
    return ( 
         <View style = {{flex:1}}>
            <TouchableOpacity
              style = {{borderBottomColor: '#fff', height: 40}}
              onPress = {() => this.props.navigation.navigate('screen name')}
            >
              <Text style = {{color: '#FFFFFF',fontSize: 18}} 
               type='h5White'>your tab name</Text>
            </TouchableOpacity> 
         </View> 
   ); 
 } 

}

подробнее см. https://medium.freecodecamp.org/how-to-build-a-nested-drawer-menu-with-react-native-a1c2fdcab6c9

перейти к этому среднему руководству https://medium.com/@mehulmistri/drawer-navigation-with-custom-side-menu-react-native-fbd5680060ba

создать настраиваемую боковую панель всегда фиксировано: --- Не используйте ящик. Я делаю это, используя hoc (компоненты высшего порядка) Кулак создает компоненты высшего порядка как sidebar.js

    import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';


const withSidebar = WrappedComponent => class extends Component {

     constructor(props) {
        super(props);
        this.state = { isConnected: true };
     }

      render() {
        return (
            <View style = {styles.container}>
                 <View style = {{width:50, top:20, backgroundColor: 'grey',}}>
                    <TouchableOpacity
                        style = {styles.menu}
                        onPress = {() => console.info('code')}
                    >
                        <Text style = {styles.menuText} type='h5White'>first</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style = {styles.menu}
                        onPress = {() => console.info('code')}
                    >
                        <Text style = {styles.menuText} type='h5White'>second</Text>
                    </TouchableOpacity>
                </View>
                <View style = {{flex:1, backgroundColor: 'red', top:20}}>
                    <WrappedComponent {...this.props} /> 
                </View>

            </View>
         );
      }
}; 


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',
  },
  welcome: {
    flex: 1,
    margin: 20,
    backgroundColor: 'orange',
    margin: 10,
    textAlign: 'center',
    fontSize: 20,
    paddingTop: 70,
  },
  menu: {
        paddingHorizontal: 7,
        borderBottomWidth: 1,
        borderBottomColor: '#fff',
        height: 40,
        justifyContent: 'center'
    },
    menuText: {
        justifyContent: 'center',
        color: '#FFFFFF',
        fontSize: 10,
        fontWeight: 'bold'
    },
});

export default withSidebar;

Теперь подключите свой экран только к этому hoc: --

import sidebar.js in your screen as
import withSidebar from 'sidebar'

export default connect(mapStateToProps, mapDispatchToProps)(withSidebar(yourScreenName));

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