Meu Primeiro App com React Native - #07 Screens e Buttons

Nesse tutorial trabalharemos um pouco mais com React Native e Expo. Hoje falaremos sobre screens e buttons.

Screens e Buttons no React Native

views/index.js

Para facilitar a importação das views, dentro da pasta views vamos criar um arquivo index.js:

import Home from './Home';
import Login from './Login';
import Rastreio from './Rastreio';

export {Home,Login,Rastreio};

E podemos importá-la da seguinte forma:

import {Home,Login,Rastreio} from './views';

Rastreio.js

Criaremos também a view para rastreio das encomendas:

import React from 'react';
import {Text, View, Button} from 'react-native';

export default function Rastreio({navigation}) {

    return (
        <View>
            <Text>Esse é o componente Rastreio</Text>
            <Button
                    title='Ir para Login'
                    onPress={() => navigation.navigate('Login',{
                    id: 30
                })}
            />
        </View>
    );
}

App.js

No App.js chamaremos as screens:

return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
                  name="Home"
                  component={Home}
                  options={{
                  title:"WEFLOG",
                  headerStyle:{backgroundColor:"#F58634"},
                  headerTintColor:'#333',
                  headerTitleStyle:{fontWeight:'bold', alignSelf:'center'}
              }}
          />
          <Stack.Screen name="Login" component={Login} />
          <Stack.Screen name="Rastreio" component={Rastreio} />
          {/*<Stack.Screen name="AreaRestrita" component={AreaRestrita} />*/}
        </Stack.Navigator>
      </NavigationContainer>
  );

Na sequência criaremos dois botões personalizados:

views/Home.js

No componente Home utilizaremos um botão personalizado usando o componente do React que é o componente TouchableOpacity:

import React from 'react';
import {Text, View, Image, TouchableOpacity} from 'react-native';
import {css} from '../assets/css/Css';

export default function Home({navigation}) {

    return (
        <View style={css.container2}>
            <TouchableOpacity style={css.button__home} onPress={() => navigation.navigate('Login')}>
                <Image source={require('../assets/img/buttonLogin.png')}/>
            </TouchableOpacity>

            <TouchableOpacity onPress={() => navigation.navigate('Rastreio')}>
                <Image source={require('../assets/img/buttonRastreio.png')}/>
            </TouchableOpacity>
        </View>
    );
}

Repare que no código acima também utilizamos o componente Image pra chamar os buttons criados em PNG.

assets/css/Css.js

Vamos implementar o container2 no CSS:

container2: {
    flex: 1,
    flexDirection:'row',
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
},
button__home:{
    marginRight: 40
}

Por hoje é só turma. Sucesso nos códigos e na vida!

Precisando de assessoria? webdesignemfoco@gmail.com