React-native ящик и навигация

Question

Я создал приложение с помощью реакции-навигации, и навигация работает нормально. Я борюсь с созданием панели меню на моем FeedScreen. js. Я не могу найти в Интернете каких-либо полезных примеров. Я пробовал примеры из react native do c безуспешно.

Пожалуйста, посмотрите мой код ниже и направьте меня в правильном направлении. Спасибо!

Я использую: react-native: 0.59 react-navigation: 3.0.4

Вот приложение. js App.js

import React, {Component} from 'react';
import {Provider} from 'react-redux';
import {Root,StyleProvider} from 'native-base';
import {createStackNavigator,createAppContainer} from 'react-navigation';
.....

import { useScreens } from 'react-native-screens';


console.disableYellowBox = true;
type Props = {};
const Realm = require('realm');

export default class App extends Component<Props> {
    constructor(props) {
        super(props);
        this.state = {
            loaded : false,
            userid : false,
            didGetstarted: '0',
            changetheme: '0',
        };


   ..........

  render() {
      if (this.state.loaded) {
          const transitionConfig = () => {
              return {
                  transitionSpec: {
                      duration: 750,
                      easing: Easing.out(Easing.poly(4)),
                      timing: Animated.timing,
                      useNativeDriver: true,
                  },
                  screenInterpolator: sceneProps => {
                      const { layout, position, scene , index, scenes} = sceneProps;

                      const thisSceneIndex = scene.index;
                      const width = layout.initWidth;
                      const height = layout.initHeight
                      const translateY = position.interpolate({
                          inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1],
                          outputRange: [height, 0, 0]
                      });
                      const translateX = position.interpolate({
                          inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1],
                          outputRange: [width, 0, 0]
                      })
                      //console.log(scene.route.routeName + ' walo');
                      return (scene.route.routeName === 'player') ? { transform: [ { translateY } ] } : { transform: [ { translateX } ] }
                  },
              }
          };
          useScreens();
          let param = {
              initialRouteName: 'feed',
              headerMode: 'none',
              transitionConfig,
          };

          if (!this.state.userid) {
              param.initialRouteName = 'start';
          } else {
              if (this.state.didGetstarted === '0' || this.state.didGetstarted === null) param.initialRouteName = "welcome";
          }
          if (this.state.changetheme === '1') {
              param.initialRouteName = "account";
          }

          const stackNav = createStackNavigator(routes, param);
          const AppContainer = createAppContainer(stackNav);
          return (
              <Root >
                  {Platform.OS === 'ios' ? (
                      <KeyboardAvoidingView style={{flex: 1,overflow: 'hidden'}}  behavior="padding" enabled>
                              <MenuProvider>
                                  <Provider store={store} >
                                      <View style={{flex: 1}}>
                                          <StatusBarBackground/>
                                          <View style={{flex: 1,overflow: 'hidden',position:'absolute', top:0,height:'100%',width:'100%'}}>
                                              <AppContainer/>
                                          </View>
                                      </View>
                                  </Provider>
                              </MenuProvider>
                      </KeyboardAvoidingView>
                  ) : (<View style={{flex:1}}>
                          <MenuProvider>
                              <Provider store={store} >
                                  <View style={{flex: 1}}>
                                      <StatusBarBackground/>
                                      <View style={{flex: 1,overflow: 'hidden'}}>
                                          <AppContainer/>
                                      </View>
                                  </View>
                              </Provider>
                          </MenuProvider>
                  </View>)}
              </Root>
          );
      }
      return null;
  }

    componentDidMount() {
        SplashScreen.hide();
    }
}

Это FeedScreen.js

import React, {Component} from 'react';
import BaseScreen from "../utils/BaseScreen";
import {Platform,View,Text,Image,TouchableOpacity,ScrollView,NetInfo} from 'react-native';
import {Container,Icon,Button,Content,Left,Right,Title,Body,Header,Tab,Badge, Tabs, ScrollableTab,TabHeading,Item,Input} from 'native-base';
import {connect} from "react-redux";
import DisplayComponent from '../components/DisplayComponent';
import PleaseLoginComponent from "../utils/PleaseLoginComponent";

class FeedScreen extends BaseScreen {

    constructor(props) {
        super(props);
        this.activeMenu = "feed";
        this.state = {
            ...this.state,
            genres : []
        }

        this.props.navigation.addListener('didFocus', (status: boolean) => {
            this.updateState({player : (this.player.track !== null) ? true : false});
            this.player.updateComponent(this.component);
            this.updateState({
                playing : this.player.playing,
                isPaused: this.player.isPaused
            })

            this.checkAuth();
        });

        this.loadGenres();
    }

    render() {
        return this.show(<Container style={{flex: 1}}>


            <Header searchBar rounded hasTabs style={{paddingBottom:20,backgroundColor: this.theme.headerBg,height:65}}>

            <TouchableOpacity onPress={() => this.props.navigation.navigate('account', {player : this.player})}>
                    <Icon style={{fontSize:20, color: '#fff', position:'relative', top: 12,marginLeft:10, marginRight:10}} name="menu" type="SimpleLineIcons"  />
                    </TouchableOpacity>




                <Item  style={{backgroundColor:'rgba(0,0,0,0.2)',top:10}}>



                    <TouchableOpacity onPress={() => this.props.navigation.navigate('explore', {player : this.player})}>
                        <View style={{flexDirection: 'row'}}>
                            <Icon name="ios-search" style={{color:'#E3E3E3'}}/>
                            <Text style={{color:'#E3E3E3', fontSize:15,marginTop:3}}>{lang.getString('search_placeholder')}</Text>
                        </View>
                    </TouchableOpacity>
                </Item>
                {this.isLoggedIn() ? (<View style={{flexDirection: 'row'}}>
                    <TouchableOpacity onPress={() => this.props.navigation.navigate('notifications',  {player : this.player})} transparent style={{position:'relative', top: 12,marginLeft:7, marginRight:10}}>

                        <Icon name='bell' type="SimpleLineIcons" style={{color:'#fff',fontSize:20}} />
                        {this.state.notifications > 0 ? (
                            <View style={{position:'absolute', top:-5, right:0,width:10,height:10,borderRadius:100,backgroundColor:this.theme.brandPrimary}}></View>
                        ) : null}
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.props.navigation.navigate('messages',  {player : this.player})} transparent style={{position:'relative', top:12}}>
                        <Icon name='envelope' type="SimpleLineIcons" style={{color:'#fff',fontSize:20}} />
                        {this.state.countMessages > 0 ? (
                            <View style={{position:'absolute', top:-5, right:0,width:10,height:10,borderRadius:100,backgroundColor:this.theme.brandPrimary}}></View>
                        ) : null}
                    </TouchableOpacity>
                </View>) : null}
            </Header>

                    </Content>

            </Tabs>
        </Container>)
    }
.......

export default connect((state) => {
    return {
        userid : state.auth.userid,
        avatar : state.auth.avatar,
        username : state.auth.username,
        apikey : state.auth.apikey,
        language : state.auth.language,
        cover : state.auth.cover,
        theme : state.auth.theme,
        setup: state.auth.setup
    }
})(FeedScreen)```