Как добавить меню React-Navigation Drawer на мои экраны?

У меня есть домашний экран, созданный с помощью React-Navigation 3.x. У меня есть заголовок, несколько значков навигации и нижнее меню вкладок. Он работает хорошо, но теперь я хочу добавить меню ящика на экран и добавить значок в правом верхнем углу для переключения ящика.

Вот упрощенная версия моего домашнего экрана (App.js):

import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
import Activity1 from './Activity/Activity1';
import Activity2 from './Activity/Activity2';
import Activity3 from './Activity/Activity3';
import Calendar from './Screens/Calendar';
import Graph from './Screens/Graph';
import DrawerMenu from './components/DrawerMenu';

class HomeScreen extends React.Component {
   static navigationOptions = {
      title: 'Home',
      headerRight: (<Button onPress={() => this.props.navigation.toggleDrawer()} title='Menu' />)
    };

    render() {
       return (
          <View style={styles.container}>
             <View style={styles.iconContainer}>
                <Icon name='icon1' onPress={this.navToActivity1} />
                <Icon name='icon2' onPress={this.navToActivity2} />
                <Icon name='icon3' onPress={this.navToActivity3} />
             </View>
             <View>
                <DrawerMenu />
             </View>
          </View>
       );
    }
}

//create my main navigation stacks here 
const Home = createStackNavigator({
   HomeScreen,
   Activity1,
   Activity2,
   Activity3,
});

//The following two are for the bottom tab bar only
const Calendar = createStackNavigator({ Calendar });
const Graph = createStackNavigator({ Graph });

const BottomTabNav = createBottomTabNavigator({
    Home, Calendar, Graph
});

export default createAppContainer(TabNavigator);

А вот код для DrawerMenu.js

import { Dimensions } from 'react-native';
import { createDrawerNavigator, createAppContainer } from 'react-navigation';
import Settings from './Settings';
import Profile from './Profile';

const SCREENWIDTH = Dimensions.get('window').width;

const DrawerConfig = {
  drawerWidth: SCREENWIDTH * 0.5,
  drawerPosition: 'right',
};

const DrawerMenu = createDrawerNavigator({
       Settings: { screen: Settings },
       Profile: { screen: Profile },
   },
   DrawerConfig
);

export default createAppContainer(DrawerMenu);

Я не мог заставить ящик работать. Когда я нажимаю кнопку «Меню» в правом верхнем углу главного экрана, чтобы вызвать toggleDrawer (), я получил ошибку «undefined is not an object (оценка 'ae.props.navigation')».

Ящик также нельзя активировать жестом, поэтому я думаю, что добавляю его неправильно. Что я здесь сделал не так? Спасибо!!


react-native react-native-android react-navigation react-navigation-drawer
person Mochi08    schedule 04.04.2019    source источник
comment
вы установили npmjs.com/package/react-native-gesture-handler проверьте установку здесь reactnavigation.org/docs/en/getting-started.html #installation   -  person Vinil Prabhu    schedule 04.04.2019
comment
Я убедился, что обработчик жестов уже установлен и связан. Я также перешел по вашей ссылке и добавил операторы импорта и метод переопределения в Android MainActivity.java. К сожалению, это не имело никакого значения.   -  person Mochi08    schedule 04.04.2019

Ответы (1)


arrow_upward
-1
arrow_downward

установите пакет response-native-drawer https://www.npmjs.com/package/react-native-drawer

<Drawer
    type="overlay"
    ref={ref => (this._drawer = ref)}
    content={<Sidebar />}
    tapToClose={true}
    openDrawerOffset={0.2} // 20% gap on the right side of drawer
    panCloseMask={0.2}
    closedDrawerOffset={-3}
    styles={drawerStyles}
    tweenHandler={ratio => ({ main: { opacity: (2 - ratio) / 2 } })}
  >

компакт-диски

person lovepreet singh    schedule 04.04.2019