Я хочу открыть ящик, когда нажимаю вкладку настроек своего PostsScreen.
Однако, когда я нажимаю на вкладку настроек, я получаю сообщение об ошибке:
undefined не является объектом (оценивается как «navigation.openDrawer»)
Я открываю свой ящик с экрана сообщений следующим образом:
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()}
/>
)
}
}
Для моей навигации по экрану сообщений я используя следующий код:
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)
Я опустил здесь какой-то посторонний код для заголовка, чтобы сосредоточиться на соответствующем коде.
Я также попытался вызвать Drawer с помощью this.props.navigation. navigate.openDrawer, но я получил похожую ошибку.
Для справки, вот мой GalioDrawer с кнопкой выхода из системы:
import React from 'react';
import PropTypes from 'prop-types';
import {
Image, StyleSheet, ScrollView, SafeAreaView, Platform,
} from 'react-native';
import {
createDrawerNavigator,
DrawerItems,
} from 'react-navigation';
// screens
//import Components from './src/screens/Components';
//import theme from './src/theme';
import { Block, Icon, Text } from 'galio-framework';
const GalioDrawer = props => (
<SafeAreaView style={styles.drawer} forceInset={{ top: 'always', horizontal: 'never' }}>
<Block space="between" row style={styles.header}>
<Block flex={0.3}><Image source={{ uri: 'https://is2-ssl.mzstatic.com/image/thumb/Purple123/v4/2c/ca/ee/2ccaeefb-1c60-6387-64c9-7cb425cfbdb3/source/512x512bb.jpg' }} style={styles.avatar} /></Block>
<Block flex style={styles.middle}>
<Text size={theme.SIZES.FONT * 0.875}>Hey Guys</Text>
<Text muted size={theme.SIZES.FONT * 0.875}>Settings</Text>
</Block>
</Block>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
);
const styles = StyleSheet.create({
drawer: {
flex: 1,
},
header: {
paddingHorizontal: theme.SIZES.BASE,
paddingTop: theme.SIZES.BASE * 0.6875,
paddingBottom: theme.SIZES.BASE * 1.6875,
borderBottomColor: '#D8D8D8',
borderBottomWidth: 0.5,
marginTop: Platform.OS === 'android' ? theme.SIZES.BASE * 2 : null,
},
avatar: {
width: theme.SIZES.BASE * 2.5,
height: theme.SIZES.BASE * 2.5,
borderRadius: theme.SIZES.BASE * 1.25,
},
middle: {
justifyContent: 'center',
},
});
const MenuIcon = ({ name, family, focused }) => (
<Icon
name={name}
family={family}
size={theme.SIZES.FONT}
color={focused ? theme.COLORS.WHITE : '#5D5D5D'}
/>
);
MenuIcon.defaultProps = {
name: null,
family: null,
focused: false,
};
MenuIcon.propTypes = {
name: PropTypes.string,
family: PropTypes.string,
focused: PropTypes.bool,
};
const screens = {
Home: {
screen: MenuScreen,
navigationOptions: {
drawerLabel: 'Log Out',
drawerIcon: props => <MenuIcon name="" family="font-awesome" focused={props.focused} />,
},
},
Back: {
screen: PostsScreen,
navigationOptions: {
drawerLabel: '',
drawerIcon: props => <MenuIcon name="" family="font-awesome" focused={props.focused} />,
},
},
const options = {
contentComponent: props => <GalioDrawer {...props} />,
contentOptions: {
labelStyle: {
fontWeight: 'bold',
color: theme.COLORS.GREY,
fontSize: theme.SIZES.FONT * 0.875,
marginLeft: theme.SIZES.BASE * 0.75,
},
activeLabelStyle: {
color: 'BLACK',
},
activeBackgroundColor: theme.COLORS.THEME,
itemsContainerStyle: {
paddingVertical: 0,
},
iconContainerStyle: {
marginHorizontal: 0,
marginLeft: theme.SIZES.BASE * 1.65,
// marginRight: theme.SIZES.BASE * 0.76,
},
},
};
const GalioApp = createDrawerNavigator(screens, options);
export default GalioApp;
В чем причина моей ошибки?