Я не могу открыть ящик навигатора. Вероятно, кнопка не получает навигационные реквизиты. Но я понятия не имею, почему это происходит. Навигатор Drawer создается внутри stacknavigator, так что он будет отображать меню гамбургера при нажатии кнопки на главном экране.
создал стекавигатор для навигации между экранами «Вход в систему», «Регистрация», «Домашний экран» (сам по себе «Домашний экран» является нижней панелью навигации, а домашний компонент отображается на домашнем экране по умолчанию). Навигатор с выдвижным ящиком создан для открытия при щелчке (эта кнопка является частью Home), но он не открывается с ошибкой "this2.props.navigation.dispatch не является функцией / объектом.
Вот мой файл Drawernavigator.js
import React, {Component} from 'react';
import {createAppContainer , createDrawerNavigator } from 'react-navigation';
import {View,Text,Image,TouchableOpacity,Button} from 'react-native';
//importing customised components from other folders
import Home from '../components/Home';
import AboutPGMEE from './AboutPGMEE';
import FAQ from './FAQ';
import Settings from './Settings';
import ContactPGMEE from './ContactPGMEE';
import Notification from './Notifications';
import LogOut from './LogOut';
import TermsOfUse from '../Screens/InitialScreens/TermsOfUse';
import PrivacyPolicy from './PrivacyPolicy';
import ShareApp from './ShareApp';
import Videos from '../components/Videos';
import AppContainer from '../FirstNavigator';
import HomeScreen from '../HomeScreen';
const DrawerStack=createDrawerNavigator(
{
/*
HomeScreen:()=><HomeScreen/>,
//() => <YOUR COMPONENT/> to suppress the error modifications made here into the syntax
AboutPGMEE:()=>< AboutPGMEE/>,
FAQ: ()=><FAQ/>,
Settings:()=><Settings/>,
ContactPGMEE:()=><ContactPGMEE/>,
Notification:()=><Notification/>,
LogOut:()=><LogOut/>,
TermsOfUse:()=><TermsOfUse/>,
PrivacyPolicy:()=><PrivacyPolicy/>,
Home:()=><Home/>,
*/
// Home:Home,
HomeScreen:FAQ,
AboutPGMEE: AboutPGMEE,
FAQ:FAQ,
Settings:Settings,
ContactPGMEE:ContactPGMEE,
Notification:Notification,
LogOut:LogOut,
TermsOfUse:TermsOfUse,
PrivacyPolicy:PrivacyPolicy
},
{
initialRouteName:'HomeScreen',
backBehavior:'initialRoute',
drawerBackgroundColor:'powderblue',
drawerPosition:'left',
drawerWidth:300,
contentOptions: {
activeTintColor: '#e91e63',
},
}
)
const SideBarNavigator=createAppContainer(DrawerStack);
export default SideBarNavigator;
Ниже мой Firstnavigator.js
import React from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer,createSwitchNavigator } from 'react-navigation';
import HomeScreen from './HomeScreen';
import LogInScreen from './Screens/InitialScreens/LogInScreen';
import SignUpScreen from './Screens/InitialScreens/SignUpScreen';
import TermsOfUse from './Screens/InitialScreens/TermsOfUse';
import Home from './components/Home';
import SideBarNavigator from './sidebar/DrawerNavigator'
const RootStack = createSwitchNavigator(
{
LogInScreen: LogInScreen,
HomeScreen: HomeScreen,
SignUpScreen: SignUpScreen,
TermsOfUse:TermsOfUse,
Home:Home,
SideBarNavigator:SideBarNavigator,
},
{
initialRouteName: 'LogInScreen',
}
);
const AppContainer = createAppContainer(RootStack);
export default AppContainer;
ниже - мой Home.js (включен только соответствующий код. Файл большего размера, допустим, синтаксис в порядке)
import React from 'react';
import {Col, Row, Grid} from 'react-native-easy-grid';
import {View,StyleSheet,Text,ScrollView,Image,TouchableOpacity } from 'react-native';
import Booklist from './BookList';
import {Card} from 'react-native-elements';
import {createStackNavigator,createAppContainer, DrawerActions} from 'react-navigation';
import SideBarNavigator from '../sidebar/DrawerNavigator';
export default class Home extends React.Component {
render() {
return (
<ScrollView style={{flex:1}}>
<View style={styles.container}>
<View style={[styles.boxContainer,styles.bigheader]}>
<View style={{flex:1,flexDirection:'column'}}>
<View style={{flex:1,flexDirection:'column',backgroundColor:'#8E24AA'}}>
<View style={{backgroundColor:'#8E24AA'}}>
<Text> </Text>
<View style={{flexDirection:'row',alignContent:'center', alignItems:'center',justifyContent:'center'}}>
<View style={{flex:1}}>
<TouchableOpacity onPress={()=>this.props.navigation.dispatch(DrawerActions.openDrawer())}>
<Image source={require('./tab.png')} style={{height:30,width:35}}/>
</TouchableOpacity>
</View>
<View style={{flex:12}}>
<Text style={{fontSize:30,textAlign:'center',fontWeight:'bold',color:'white'}}>
DASHBOARD
</Text>
#########
</View>
а это HomeScreen.js
import React from 'react';
import Home from './components/Home';
import Qbank from './components/Qbank';
import Test from './components/Test';
import Videos from './components/Videos';
import { BottomNavigation } from 'react-native-paper';
//import AppContainers from './components/Home';
const GoToHome=()=>{
return (<Home/>)
}
const GoToTest=()=>{
return ( <Test/>)
}
const GoToQbank=()=>{
return ( <Qbank/>)
}
const GoToVideos=()=>{
return ( <Videos/>)
}
export default class HomeScreen extends React.Component {
handleIndexChange=index=>this.setState({index});
state={index:0,routes:[{key:'Home',title:'Home',icon:'home'},
{key:'Qbank',title:'Qbank',icon:'question-answer'},
{key:'Test',title:'Test',icon:'timer-off'},
{key:'Videos',title:'Videos',icon:"video-call"},
],};
renderScene=BottomNavigation.SceneMap({
Home:GoToHome,
Test:GoToTest,
Qbank:GoToQbank,
Videos:GoToVideos,
});
render() {
return (
<BottomNavigation
navigationState={this.state}
onIndexChange={this.handleIndexChange}
renderScene={this.renderScene}
/>
)}
}
Я ожидал, что ящик откроется при щелчке изображения, упомянутого в Home.js. Но это дает ошибку.