当我按PostsScreen的设置标签时，我想打开一个抽屉。
但是，当我点击“设置”标签时，出现错误消息：
未定义不是对象（正在评估“ navigation.openDrawer”）
我以以下方式从PostsScreen打开抽屉：
Element wins = document.selectFirst("td[data-stat=\"wins\"]");对于PostsScreen导航，我使用以下代码：
class Header extends React.Component {
constructor(props) {
super(props)
this.state = {
loved: false
}
this.unHeart = this.unHeart.bind(this)
global.unHeart = this.unHeart
}
render() {
const { navigation } = this.props;
return(
<Icon.Button
name="setting"
size={25}
iconStyle = {{marginRight: 0}}
backgroundColor = "transparent"
padding = {0}
color = {'white'}
underlayColor = "transparent"
onPress = {() => navigation.openDrawer()}
/>
)
}
}
我在这里省略了一些无关的代码，以使标头专注于相关代码。
我也尝试使用this.props.navigation.navigate.openDrawer调用抽屉，但是出现类似错误。
作为参考，这是带有注销按钮的GalioDrawer：
import React from 'react'
import { View, Text, Dimensions, TouchableOpacity, ImageBackground} from 'react-native'
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { createStackNavigator } from 'react-navigation-stack';
import { BlurView } from 'expo-blur';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import Icon2 from 'react-native-vector-icons/FontAwesome5'
import Icon3 from 'react-native-vector-icons/AntDesign'
import Icon4 from 'react-native-vector-icons/Entypo'
import PostsScreen from '../screens/PostsScreen.js'
import CommentsScreen from '../screens/CommentsScreen.js'
import MatchingScreen from '../screens/MatchingScreen.js'
const navigationOptions = () => ({
headerTintColor: 'white',
headerTransparent: true,
})
const navigationOptionsPosts = () => ({
headerTintColor: 'white',
headerTransparent: true,
headerBackTitle: null,
headerShown: false
})
const screenHeight = Dimensions.get('window').height;
const screenWidth = Dimensions.get('window').width;
class TabBar extends React.Component {
constructor(props) {
super(props)
this.state = {
posts: true
}
this.postsNav = this.postsNav.bind(this)
global.toPosts = this.postsNav
}
postsNav() {
this.setState({posts: true})
this.props.navigation.navigate("Posts")
}
render() {
return(
<View
style={{
position: 'absolute', bottom: 0, right: 0, left:0,
justifyContent: 'flex-end',
alignItems: 'center',
}}
pointerEvents={"box-none"}>
<View
style={{
height: 50.5,
position: 'absolute', bottom: 0, right: 0, left:0,
flexDirection:"row",
borderColor: 'rgba(0, 0, 0, 1)',
borderTopWidth: 0.5,
//backgroundColor: 'rgba(133, 94, 66, 0.1)'
}}
pointerEvents={"box-none"}
/>
<BlurView //Bar
tint="light"
intensity = {85}
style={{
height: 50,
position: 'absolute', bottom: 0, right: 0, left:0,
flexDirection:"row",
borderColor: 'rgba(0, 0, 0, 0.5)',
borderTopWidth: 0
}}
//pointerEvents={"box-none"}
>
<TouchableOpacity //Posts
style={{flex: 1, backgroundColor: 'transparent'}}
activeOpacity = {1}
onPress={() => {
this.setState({posts: true})
this.props.navigation.navigate("Posts")
}}>
<View style = {{
flex:1,
alignItems: 'center',
justifyContent: 'center',
paddingRight: 35,
paddingBottom: 11}}>
<Icon.Button
name="home"
size={29}
marginBottom= {-10}
iconStyle = {{marginRight: 0}}
backgroundColor = "transparent"
paddingRight = {15}
color = {this.state.posts ? 'blue' : 'black'}
underlayColor = "transparent"
onPress = {this.postsNav}
/>
<Text style={{
textAlign: 'center', marginRight: 7, backgroundColor: 'transparent',
color: this.state.posts ? 'blue' : 'black'
}}>
Posts
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity //Matches
style={{flex: 1, backgroundColor: 'transparent'}}
activeOpacity = {1}
onPress={() => {
this.setState({posts: false})
this.props.navigation.navigate("Matches")
}}>
<View style = {{
flex:1,
alignItems: 'center',
justifyContent: 'center',
paddingLeft: 35}}>
<Icon2
name="user-friends"
size={25}
iconStyle = {{marginRight: 0}}
backgroundColor = "transparent"
paddingRight = {15}
color = {this.state.posts ? 'black' : 'blue'}
underlayColor = "transparent"
/>
<Text style={{
textAlign: 'center', backgroundColor: 'transparent',
color: this.state.posts ? 'black' : 'blue'
}}>
Matches
</Text>
</View>
</TouchableOpacity>
</BlurView>
<View //plus
tint="default"
intensity = {95}
style={{width: 75, alignItems: 'center'}}>
<View style = {{alignItems: 'center', paddingBottom: 71}}>
<BlurView style = {{
position: 'absolute',
borderRadius: 47,
}}
tint="light"
intensity = {85}>
<Icon3
name="pluscircle"
size={70}
iconStyle = {{marginRight: 0}}
backgroundColor = "transparent"
padding = {0}
color = {'transparent'}
underlayColor = "transparent"
/>
</BlurView>
<View style = {{position: 'absolute'}}>
<Icon3.Button
name="pluscircleo"
size={70}
iconStyle = {{marginRight: 0}}
backgroundColor = "transparent"
padding = {0}
color = {'rgba(45, 0, 110, 1)'}
underlayColor = "transparent"
activeOpacity = {0.6}
onPress = {() => {
global.showPostPanel()
}}
/>
</View>
</View>
</View>
</View>
)
}
}
const TabNavigator = createBottomTabNavigator(
{
Posts: {
screen: PostsScreen,
},
Plus: {
screen: PostsScreen,
},
Matches: {
screen: MatchingScreen,
}
},
{
tabBarComponent: props => {return <TabBar {...props}/>}
}
)
const PostsNavigator = createStackNavigator({
Posts: {
screen: TabNavigator,
navigationOptions: navigationOptionsPosts,
},
Comments: {
screen: CommentsScreen,
navigationOptions: navigationOptions,
},
/*Settings: {
screen: SettingsNavigator,
navigationOptions: navigationOptions,
}*/
},
{
initialRouteName: 'Posts'
})
export default createAppContainer(PostsNavigator)
是什么导致我的错误？