我已经使用react-navigation创建了应用程序，并且导航工作正常。我正在努力在FeedScreen.js中创建菜单抽屉。我无法在线找到任何可用的示例。我已经尝试了反应本地文档的示例，但没有成功。
请在下面查看我的代码，并指导我正确的方向。谢谢！
我正在使用： 反应本机：0.59 反应导航：3.0.4
这是app.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)```