0

Estou desenvolvendo um APP no react-native, nele preciso exibir um menu-lateral esquerdo. Embora não exibe nenhuma mensagem de erro, não aparece o menu lateral. Estou usando o react-navigation-drawer para criar o menu. O codigo esta abaixo. Qualquer dúvida pode perguntar!

Menu

import React, {Component} from 'react';
import { createAppContainer } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';



import Login from './screen/Login';
import HomeScreen from './screen/Home';
import EmCartazScreen from './screen/EmCartaz';
import PerfilScreen from './screen/Perfil';
import RecuperarContaScreen from './screen/RecuperarConta';


const Menu = createDrawerNavigator(
    {
        Home: HomeScreen

    }
);  


export default createAppContainer(Menu);

Home

import React, {Component} from 'react';
import { View, Text, Image, ScrollView } from 'react-native';

import { createAppContainer } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';


import styles from '../css/style';

export default class Home extends Component{

  static navigationOptions = ({ navigation }) =>{
    drawerLabel: 'Home'
  }

  render(){

    return(


          <View style={styles.container}>
            <Text style={styles.texto}>
              Seja Bem Vindo !!
            </Text>

          <Text 
            style={styles.recuperarConta}
            onPress={() => this.props.navigation.goBack()}
          >
            Sair
          </Text>

          </View>
        );
    }
}

Index

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import Menu from './src/Menu';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => Menu);

Json do projeto

{
  "name": "aprendareactnative2",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-gesture-handler": "^1.5.2",
    "react-native-reanimated": "^1.4.0",
    "react-native-screens": "^2.0.0-alpha.22",
    "react-navigation": "^4.0.10",
    "react-navigation-drawer": "^2.3.3",
    "react-navigation-stack": "^1.10.3"
  },
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/runtime": "^7.7.7",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.8.0",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.57.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Tela

2
  • Criei um botao para força aparecer o menu laterl: <Button onPress={() => this.props.navigation.openDrawer()} title="Menu" /> Commented 24/12/2019 às 10:39
  • Contudo meu objetivo é deslizar o Menu Lateral Commented 24/12/2019 às 10:39

1 Resposta 1

2

De acordo com o seu comentário, o menu aparece se você adicionar um botão em alguma tela.

Para fazer o menu aparecer ao desligar, será necessário editar o arquivo MainActivity.java, dentro do seu projeto, ele fica na pasta android/app/src/main/java/com/

Você vai precisar adicionar alguns imports e adicionar o método createReactActivityDelegate. Segue um exemplo:

package com.graficos;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "graficos";
  }

  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected ReactRootView createRootView() {
       return new RNGestureHandlerEnabledRootView(MainActivity.this);
      }
    };
  }

}

Depois de alterar o arquivo, pelo terminal, na raiz do projeto, digite

react-native run-android

E teste novamente o seu aplicativo.

Mais informações:

https://software-mansion.github.io/react-native-gesture-handler/docs/getting-started.html

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .