У меня 1 проблема здесь ... Я хочу добавить боковое меню на страницу Cases2. js. Я хочу добавить 4 меню: NewCase, Inbox, Draft, Report. Я добавил иконку для кнопки, которая при нажатии откроет боковое меню с левой стороны экрана. Но когда я нажимаю, я получаю сообщение об ошибке, содержащее Объект не поддерживает свойство или метод 'openDrawer' Изначально я думал о том, не связал ли я Cases2. js с маршрутами. js для навигации , но если это действительно еще не так, как мне соединить боковое меню с 4 меню, которые я хочу отобразить?
Вот скрипт из Cases2. js
import React, { Component } from 'react';
import { Text, View, StyleSheet, SafeAreaView, Image, TouchableOpacity, ScrollView, Dimensions, Modal, Alert, BackHandler } from 'react-native';
import { Actions } from 'react-native-router-flux';
import Wallpaper2 from '../components/Wallpaper2';
import SimpleModal from '../components/SimpleModal';
import MenuImage from '../components/MenuImage';
export default class Cases2 extends Component {
static navigationOptions = ({ navigation }) => ({
title: '',
headerLeft: (
<MenuImage
onPress={() => {
navigation.openDrawer();
}}
/>
)
});
constructor(props) {
super(props)
this.state = {
tokens: this.props.Tokennya,
user: this.props.userName,
pass: "",
role: "",
tokennya: [],
alluser: [],
user_role: [],
ussr_role: "",
error: "",
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
isModalVisible: false,
};
Dimensions.addEventListener('change', (e) => {
this.setState(e.window);
});
}
changeModalVisibility = (bool) => {
this.setState({ isModalVisible: bool });
}
componentDidMount() {
this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
fetch('https://bpm.asihputera.or.id/api/1.0/asihputera/extrarest/login-user', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Accept-Encoding': 'gzip, deflate',
'Authorization': 'Bearer ' + this.state.tokens,
},
}).then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
this.setState({
alluser: responseJson,
});
this.getUserRole(this.state.alluser.uid);
});
}
componentWillUnmount() {
this.backHandler.remove()
}
handleBackPress = () => {
return true;
}
getUserRole = (userID) => {
fetch('https://bpm.asihputera.or.id/api/1.0/asihputera/user/' + userID, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Accept-Encoding': 'gzip, deflate',
'Authorization': 'Bearer ' + this.state.tokens,
},
}).then((response) => response.json())
.then((responseJson) => {
this.setState({
user_role: responseJson
});
if (this.state.user_role.usr_role == 'PROCESSMAKER_ADMIN')
this.setState({
ussr_role: 'Administrator'
})
else if (this.state.user_role.usr_role == 'PROCESSMAKER_OPERATOR')
this.setState({
ussr_role: 'Operator'
})
else if (this.state.user_role.usr_role == 'PROCESSMAKER_MANAGER')
this.setState({
ussr_role: 'Manager'
})
})
}
onTaskPressed() {
Actions.newcases({ "Tokennya": this.state.tokens })
}
onDraftPressed() {
Actions.draft({ "Tokennya": this.state.tokens })
}
onInboxPressed() {
Actions.inbox({ "Tokennya": this.state.tokens })
}
onLaporanPressed() {
Actions.LaporanBirt({ "Tokennya": this.state.tokens, "NIP": this.state.alluser.position, "Dept": this.state.alluser.departmentname, "Group": this.state.alluser.zipcode})
}
showAlertLogout = () => {
Alert.alert(
'Konfirmasi',
'Apakah ingin logout ?',
[
{ text: 'Cancel', onPress: () => console.log('Ask me later pressed') },
{ text: 'OK', onPress: () => Actions.login2() },
],
{ cancelable: false },
);
}
render() {
return (
<Wallpaper2>
<View style={[styles.shape2, { width: this.state.width }]}>
<Text style={styles.asihPutera}> ASIH PUTERA </Text>
<TouchableOpacity onPress={this.showAlertLogout.bind(this)} style={[styles.touchableHighlight]}>
<View style={{ flexDirection: 'column' }}>
<Text style={styles.usernamenya}>{this.state.alluser.username}</Text>
<Text style={styles.logIn}>{this.state.ussr_role}</Text>
</View>
<Image style={styles.iconLogin} source={require('../images/Person.png')} />
</TouchableOpacity>
<Modal transparent={true} visible={this.state.isModalVisible} onRequestClose={() => this.changeModalVisibility(false)}
animationType='slide'>
<SimpleModal changeModalVisibility={this.changeModalVisibility} />
</Modal>
</View>
<Text style={styles.cases}> MENU </Text>
<ScrollView>
<View style={{ flex: 1, justifyContent: 'center', alignSelf: 'center' }}>
<View style={{ flexDirection: 'row', justifyContent: 'center', flex: 1 }}>
<TouchableOpacity onPress={this.onTaskPressed.bind(this)}>
<Image style={styles.newcase} source={require('../images/NewCase.png')} />
</TouchableOpacity>
<TouchableOpacity onPress={this.onInboxPressed.bind(this)}>
<Image style={styles.inbox} source={require('../images/Inbox.png')} />
</TouchableOpacity>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'center', flex: 1 }}>
<TouchableOpacity onPress={this.onDraftPressed.bind(this)}>
<Image style={styles.newcase} source={require('../images/Draft.png')} />
</TouchableOpacity>
<TouchableOpacity onPress={this.onLaporanPressed.bind(this)}>
<Image style={styles.inbox} source={require('../images/Report.png')} />
</TouchableOpacity>
</View>
</View>
</ScrollView>
</Wallpaper2>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
home: {
width: 50,
height: 50,
},
laporan: {
width: 50,
height: 50,
},
setting: {
width: 133,
height: 45,
color: '#015c6f',
fontSize: 18,
fontWeight: '700',
lineHeight: 43.2,
marginLeft: 145
},
shape2: {
width: 723,
height: 40,
backgroundColor: '#00ffc6',
},
asihPutera: {
marginTop: 5,
marginLeft: 10,
color: '#015c6f',
fontSize: 20,
fontWeight: 'bold',
fontStyle: 'italic',
},
logIn: {
color: '#0d535d',
fontSize: 8,
alignSelf: 'flex-end',
},
usernamenya: {
color: '#0d535d',
fontSize: 15,
marginTop: -30,
marginLeft: 100,
},
iconLogin: {
width: 50,
height: 50,
marginTop: -38,
},
madrasah: {
color: '#015c6f',
fontSize: 30,
textAlign: 'center',
marginTop: 10,
},
shape3: {
width: 723,
height: 50,
alignSelf: 'flex-end',
backgroundColor: '#00ffc6',
flexDirection: 'row',
},
shape4: {
marginTop: 15,
width: 290,
height: 120,
borderRadius: 10,
borderColor: '#707070',
borderStyle: 'solid',
borderWidth: 1,
backgroundColor: '#015c6f',
//marginLeft: 35,
alignSelf: 'center'
},
daycare: {
color: '#feffff',
fontSize: 18,
textAlign: 'center',
marginTop: 30,
},
aliyah: {
color: '#feffff',
fontSize: 18,
textAlign: 'center',
marginTop: 20,
},
newcase: {
width: 120,
height: 120,
marginTop: 45,
},
inbox: {
width: 120,
height: 120,
marginTop: 45,
marginLeft: 60,
},
keuangan: {
width: 100,
height: 100,
marginTop: 90,
marginLeft: 40,
},
akademik: {
width: 100,
height: 100,
marginTop: 90,
marginLeft: 80,
},
cases: {
color: '#015c6f',
fontSize: 30,
marginTop: 30,
fontStyle: 'italic',
fontWeight: 'bold',
alignSelf: 'center',
},
touchableHighlight: {
flexDirection: 'row',
alignSelf: 'flex-end',
}
});
Вот маршруты. js
import React, {Component} from 'react';
import {Router, Stack, Scene} from 'react-native-router-flux';
import Splash from './pages/Splash';
import Login2 from './pages/Login2';
import Cases2 from './pages/Cases2';
import NewCases from './pages/NewCases';
import Inbox from './pages/Inbox';
import Draft from './pages/Draft';
import LaporanBirt from './pages/LaporanBirt';
import Dynaform from './pages/Dynaform';
import Dynaform2 from './pages/Dynaform2';
import Inbox1 from './pages/Inbox1';
export default class Routes extends Component{
render(){
return(
<Router>
<Scene key="root" hideNavBar={true} initial={true}>
<Scene key ="splash" component={Splash} title="Splash"/>
<Scene key ="login2" component={Login2} title="Login2"/>
<Scene key ="Cases2" component={Cases2} title="Cases2"/>
<Scene key ="newcases" component={NewCases} title="NewCases"/>
<Scene key ="inbox" component={Inbox} title="Inbox"/>
<Scene key ="draft" component={Draft} title="Draft"/>
<Scene key ="LaporanBirt" component={LaporanBirt} title="LaporanBirt"/>
<Scene key ="dynaform" component={Dynaform} title="Dynaform"/>
<Scene key ="dynaform2" component={Dynaform2} title="Dynaform2"/>
<Scene key ="Inbox1" component={Inbox1} title="Inbox1"/>
</Scene>
</Router>
)
}
}
Я надеюсь получить здесь помощь ... Большое спасибо