React Native Side menu Menu lateral

Vamos lá. Exeistem vários componentes React Native na internet para criar menu lateral. Nesse post vamos usar esse: https://docs.nativebase.io 

Essa biblioteca tem vários compoentes interessantes que vale a pena conferir. Mas nesse post vamos abordar o Drawer. Para isso vou usar o projeto gerado nesse Post 

Primeiramente vamos navegar pelo prompt até a pasta do projeto e executar esse comando para instalar o módulo npm da biblioteca de vamos usar:

npm install native-base --save

Quando finalizar a instalação, vamos alterar o arquivo App.js que deve ficar assim:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import {Drawer, Container, Header, Content,Button } from 'native-base';
class SideBar extends Component {
    
    
    render(){
        
        return (
                <View style={[ styles.container, { backgroundColor: '#fff' } ]}>
                        <Text>
                            <Icon name="rocket" size={30} color="#900" />
                            Conteúdo side bar
                        </Text>
                </View>
               );
    } 
};
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,' +
    'Shake or press menu button for dev menu',
});
export default class App extends Component<{}> {
  closeDrawer = () => {
      this.drawer._root.close()
  };
  openDrawer = () => {
      this.drawer._root.open()
  };    
  render() {
    return (
        <Drawer
        ref={(ref) => { this.drawer = ref; }}
        content={<SideBar navigator={this.navigator} />}
        onClose={() => this.closeDrawer()}>
        <Container>
        <Header>
            <Container style={{flexDirection: 'row'}}>
                    <Icon onPress={() => this.openDrawer()} name="bars" size={30} color="#fff" />
            </Container>
        </Header>
          
          <View style={styles.container}>
            <Text style={styles.welcome}>
              Welcome to React Native!
            </Text>
            <Text style={styles.instructions}>
              To get started, edit App.js
            </Text>
            <Text style={styles.instructions}>
              {instructions}
            </Text>
          </View>
         
        </Container>
      </Drawer>
      
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Se estiver tudo ok, o resultado deve ser esse:

Imagem

Imagem

Para melhor organização do projeto é recomendável que o componente SideBar fique em outro arquivo.

Comentários

 

(há 3 meses) Mphatheleni Matidze:

You saved my career, thank you

[responder]
 
(há 3 meses) Davi Sousa:

 

You're welcome! :)

 
(há 7 meses) Davi Sousa:

Guilherme,

No momento estou muito atarefado e sem tempo de analisar seu códido. Mas vou te passar algumas instruções que podem ajudar a resolver seu problema. Primeiro, recomendo que dê uma olhada nessa documentação. Depois recomendo que faça uma POC (projeto de teste pra testar se funciona a navegação). Dando tudo certo, adicione o código desse post e teste novamente.

(há 1 ano) Guilherme Ferreira:

Muito bom, parabéns!

[responder]
 
(há 1 ano) Nícolas Michel Rohricht:

Em tempo...

Consegui. Não havia notado um exemplo detalhado nos fontes do projeto.

Muito obrigado.

 
(há 1 ano) Davi Sousa:

Nícolas, 

O que você está querendo fazer não fica legal usando esse plugin que mostrei no post. O ideal seria usar esse outro plugin que faz exatamente o que você quer. 

 
(há 2 anos) Davi Sousa:

Se estiver executando seu projeto em Android, você deve alterar algums arquivos na pasta android. Nesse post tem todos os procedimentos necessários para resolver esse problema. Se estiver executando em IOS, segue a documentação oficial com as alterações necessárias no projeto x-code: react-native-vector-icons 

Quem Sou

Graduado em ADS (Análise e desenvolvimento de sistemas).

Não sou "devoto" de nenhuma linguagem de programação. Procuro aproveitar o melhor de cada uma de acordo com a necessidade do projeto. Prezo por uma arquitetura bem feita, código limpo, puro e simples! 

anuncio atendente