React Native: DrawerNavigation не открывается - PullRequest
Новая
       31

React Native: DrawerNavigation не открывается

0 голосов
/ 23 февраля 2020

У меня есть проблема. Я пытаюсь сделать левое меню, но оно не открывается на Android (не проверял IOS) . Я использовал этот учебник https://medium.com/@mehulmistri / ящик-навигация с пользовательским боковым меню-реагировать-родной-fbd5680060ba , но он не работал полностью с моей версией-реагировать-родной. 

"react-native": "~0.61.4",
"react-navigation": "^4.1.1",
"react-navigation-drawer": "^2.3.4",

Приложение. js: 

...
import Sidemenu from './utils/navigationSideMenu/index';
...
export default class App extends Component {
  render() {
    return(
      <ErrorBoundary>
        <Sidemenu />
      </ErrorBoundary>
    )
  }
}

index. js: 

import React, { Component } from 'react';
import { Dimensions } from 'react-native';
import { StackNavigator, createStackNavigator } from 'react-navigation-stack';
import { createAppContainer, DrawerNavigator } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';

import SideMenu from './SideMenu'
import StackNav from './stacknav';

const drawernav = createDrawerNavigator({
    StackNav: {
      screen: StackNav,
    }
  }, {
    drawerPosition: 'right',
    contentComponent: props => <SlideBar param={props} />,
    drawerBackgroundColor: 'rgba(0,0,0,.8)',
    contentOptions: {
      activeTintColor: '#fff',
      activeBackgroundColor: '#6b52ae',
    },
    contentComponent: SideMenu,
    drawerWidth: Dimensions.get('window').width - 40,
});

export default createAppContainer(drawernav);

SideMenu . js: 

import PropTypes from 'prop-types';
import React, {Component} from 'react';
import styles from './SideMenu.style';
import {NavigationActions} from 'react-navigation';
import {ScrollView, Text, View} from 'react-native';
import { StackNavigator } from 'react-navigation';

class SideMenu extends Component {
  navigateToScreen = (route) => () => {
    const navigateAction = NavigationActions.navigate({
      routeName: route
    });
    this.props.navigation.dispatch(navigateAction);
  }

  render () {
    return (
      <View style={styles.container}>
        <ScrollView>
          <View>
            <Text style={styles.sectionHeadingStyle}>
              Page 1
            </Text>
            <Text style={styles.sectionHeadingStyle}>
              Page 2
            </Text>
            <View style={styles.navSectionStyle}>
              <Text style={styles.navItemStyle} onPress={this.navigateToScreen('LoginScreen')}>
             Log in screen
              </Text>
            </View>
          </View>
        </ScrollView>
        <View style={styles.footerContainer}>
          <Text>This is my fixed footer</Text>
        </View>
      </View>
    );
  }
}

SideMenu.propTypes = {
  navigation: PropTypes.object
};

export default SideMenu;

stacknav. js: 

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View, TouchableOpacity, Button
} from 'react-native';

import { StackNavigator, createStackNavigator } from 'react-navigation-stack';
import { createAppContainer, DrawerActions  } from 'react-navigation';
import { Icon } from 'react-native-elements';

import LoginScreen from "../../screens/LoginScreen";
import SmsScreen from "../../screens/SmsScreen";
import VideoListScreen from "../../screens/VideoListScreen";

const DrawerButton = (props) => {
  const { navigate } = props.navigation
  const routeIndex = props.navigation.state.index
    return (
    <View>
      <TouchableOpacity onPress={() => { routeIndex === 0 ? navigate('DrawerOpen') : navigate('DrawerClose') }}>
        <Icon type="ionicon" name={Platform.OS === "ios" ? "ios-menu" : "md-menu"}
          containerStyle={styles.menuIcon} color="white" />
      </TouchableOpacity>
    </View>
  );
};

const stackNavMenu = createStackNavigator({
  LoginScreen : {
    screen: LoginScreen,
    navigationOptions: ({navigation}) => ({
      title: "Log in",
      headerTintColor: '#ffffff',
      headerStyle: styles.headerLineStyle,
      headerRight: () =>
        <DrawerButton navigation={navigation}  />
      ,
    })
  },
  SmsScreen: {
    screen : SmsScreen,
    navigationOptions : ({ navigation }) => ({
      title: "Confirm log in by sms",
      headerTintColor: '#ffffff',
      headerStyle: styles.headerLineStyle,
      headerRight: () =>
        <DrawerButton navigation={navigation}  />
      ,
    }),
  },
  VideoListScreen: {
    screen : VideoListScreen,
    navigationOptions : ({ navigation }) => ({
      title: "Video List",
      headerTintColor: '#ffffff',
      headerStyle: styles.headerLineStyle,
      headerRight: () =>
        <DrawerButton navigation={navigation}  />
      ,
    }),
  }
}, {
  initialRouteParams: LoginScreen,
});

const styles = StyleSheet.create({
  menuIcon: {
    borderColor: '#fff',
    right: 20
  },
  headerLineStyle : {
    backgroundColor: '#acc84a'
  }
});

const StackNav = createAppContainer(stackNavMenu);
export default StackNav;
...