Я создал ящик на экране согласно следующему пункту Документы Проблема в том, что он не открывается, даже не выдает никаких ошибок, и структура моего проекта такова, что я делаю навигацию реагирования и ящик в отдельном js files, Даже я добавил кнопку сверху, но при нажатии на кнопку ничего не происходит, ее даже не нажимают (пробовал с Alert), помогите пожалуйста! Я также использовал response-navigation / stack и использовал его в своем приложении. js и он работает нормально. Это мой основной экран, на котором сверху открыта кнопка для открытия ящика:
return (
<View style={styles.container}>
<TouchableHighlight style={styles.drawer} onPress={() => this.props.navigation.openDrawer()}>
<Image source={require('../../assets/drawer.png')}/>
</TouchableHighlight> //This TouchableHighligh onPress is not doing anything
<Text
style={{
padding: 16,
fontSize: 20,
color:'#1589FF',
textAlign: 'center',
fontWeight: 'bold',
}}>
Drawer Demo
</Text>
<Timeline
style={styles.list}
data={this.data}
circleColor="rgba(0,0,0,0)"
lineColor="rgb(45,156,219)"
/>
</View>
);
}
}
Это мой ящик, который должен отображаться при нажатии или при смахивании экрана влево:
import React from 'react';
import { View, StyleSheet } from 'react-native';
import {
DrawerItem,
DrawerContentScrollView,
} from '@react-navigation/drawer';
export function DrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<View
style={
styles.drawerContent
}
>
<View style={styles.userInfoSection}>
<View style={styles.row}>
<View style={styles.section}>
<Paragraph style={[styles.paragraph, styles.caption]}>
202
</Paragraph>
<Caption style={styles.caption}>Following</Caption>
</View>
<View style={styles.section}>
<Paragraph style={[styles.paragraph, styles.caption]}>
159
</Paragraph>
<Caption style={styles.caption}>Followers</Caption>
</View>
</View>
</View>
</Drawer.Section>
</View>
</DrawerContentScrollView>
);
}
И это мой экран, на котором я установил правила навигации по ящикам:
import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeTimeTable from './HomeTimeTable';
import {DrawerContent} from './DrawerContent';
import { NavigationContainer } from '@react-navigation/native';
const Drawer = createDrawerNavigator();
export default class DrawerScreens extends React.Component {
render(){
return (
<NavigationContainer>
<Drawer.Navigator drawerContent={() => <DrawerContent />}>
<Drawer.Screen name="HomeTimeTable" component={HomeTimeTable} />
</Drawer.Navigator>
</NavigationContainer>
);
}
}