Membuat Form Login Dengan React Native
Membuat suatu aplikasi yang berbasis Android maupun iOS memang tidak mudah Serta membutuhkan waktu dan alat yang memadai , Mulai dari laptop yang memiliki spesifikasi ram yang memadai . tapi jangan hawatir dengan react native Expo walau laptop spesifikasi nya terbatas pasti kita bisa belajar membuat aplikasi yang keren, yang terpenting kemauan kita untuk terus belajar.
Hal yang Harus Di persiapkan Untuk memulai belajar apliaksi android dengan React Native:
- Memiliki laptop minimal Ram 2 GB
- Sudah Install Nodejs , cara install node js di windows
- Sudah install Aplikasi Expo Di hand phone
jika tiga langkah diatas sudah temen-temen lakukan sekarang kita akan coba install React native
Cara install React Native Di Windows
silahkan buka cmd atau terminal temen temen, sebelum kita install react native di windows kita akan coba install expo CLI dulu , karena kita run atau jalanin aplikasinya untuk testing kita pake expo tidak menggunakan emulator android , agar lebih ringan di laptop.
install expo cli
npm install -g expo-cli
Jika expo Cli sudah di install kemudian kita akan buat projek react native nya
D:\>expo init babastudioapknew
Di drive D pada komputer , kita akan membuat folder aplikasi dengan nama babastudioapknew untuk Proses instalasinya lumayan lama y, tergantung koneksi internet
Cara install nativebase agar tampilan lebih OK
Di sini kita akan coba menggunakan css dari native base, agar supaya kita tidak terlalu banyak membuat file css, karena native base ini sama dengan boostrap css nya sudah tersedia.
install native base
install expo-font
jika sudah terinstall sekarang kita akan coba buka text editornya, disini saya menggunakan Visual Studio Code,
Kalo kita perhatikan gambar di atas, di dalam folder projek kita atau di dalam folder babastudioapknew
kita membuat folder src => dan di dalam folder src buat folder baru yaitu scren dan config, di dalam folder scren buat tiga file.js yang pertama buat file Navbar.js yang kedua Footer.js dan yang terkahir Login.js
pertama buka file Navbar.js
dan tambahkan script seperti berikut:
import React, { Component } from 'react';
import {View, Text, StyleSheet} from 'react-native';
import { Container, Header, Content, Footer, FooterTab, Button, Icon,Form, Item, Input, Label,Textarea,Left,Body,Title,Right, Row, Tabs, Tab } from 'native-base';
export default class Navbar extends Component {
render() {
return (
<Header noShadow>
<Left>
<Button transparent>
<Icon name="arrow-back" />
</Button>
</Left>
<Body>
<Title style={{marginLeft:40}}>Babastudio</Title>
</Body>
<Right>
<Button transparent>
<Icon name="menu" />
</Button>
</Right>
</Header>
);
}
}
Kemudian Buka file Footer.js
dan tambahkan script berikut
import React, { Component } from 'react';
import { Container, Header, Content, Footer, FooterTab, Button, Icon, Badge,Text } from 'native-base';
import { AppLoading } from 'expo';
import { Ionicons } from '@expo/vector-icons';
export default class FooterTabs extends Component {
state = {
fontsAreLoaded: false,
};
async componentWillMount() {
await Expo.Font.loadAsync({
'Roboto': require('native-base/Fonts/Roboto.ttf'),
'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
});
this.setState({ fontsAreLoaded: true });
}
render() {
if (!this.state.fontsAreLoaded) {
return <AppLoading />;
}
return (
<Footer >
<FooterTab>
<Button badge vertical>
<Badge><Text>2</Text></Badge>
<Icon name="apps" />
<Text>Apps</Text>
</Button>
<Button vertical>
<Icon name="camera" />
<Text>Camera</Text>
</Button>
<Button active badge vertical>
<Badge ><Text>51</Text></Badge>
<Icon active name="navigate" />
<Text>Navigate</Text>
</Button>
<Button vertical>
<Icon name="person" />
<Text>Contact</Text>
</Button>
</FooterTab>
</Footer>
);
}
}
Kemudian buka kembali file Login.js
import React, { Component } from 'react';
import { Container, Header, Content, Item, Input,Label,Button,Text,H1 } from 'native-base';
export default class Login extends Component {
render() {
return (
<Container>
<Text style={{marginTop:60,textAlign:'center'}}><H1>Login Sistem Academy</H1></Text>
<Content style={{marginHorizontal:12,marginTop:30}}>
<Item rounded>
<Input placeholder='Masukan Username Anda'/>
</Item>
<Item rounded style={{marginTop:30}}>
<Input placeholder='Masukan Password Anda'/>
</Item>
<Button rounded block style={{marginTop:20, }}>
<Text>Login Sistem</Text>
</Button>
</Content>
</Container>
);
}
}
Jika sudah membuat form Login langkah selanjutnya kita buka file App.js
dan tambahkan script berikut:
import React, { Component } from 'react';
import { Container, Header, Content, Footer, FooterTab, Button, Icon,Form, Item, Input, Label,Textarea,Left,Body,Title,Right, Row } from 'native-base';
import { StyleSheet, Text, View } from 'react-native';
import Navbar from './src/scren/Navbar';
import FooterTabs from './src/scren/Footer';
import Login from './src/scren/Login';
export default class App extends Component {
render() {
return (
<Container>
<Navbar/>
<Login/>
<FooterTabs/>
</Container>
);
}
}
const styles = StyleSheet.create({
headermenu: {
marginTop: 20,
color:'white',
alignItems: 'center',
justifyContent: 'center',
},
}); 
jika sudah jalankan cmd atau terminal teman-teman
maka di browser tampilanya seperti gambar di bawah ini :
Jika tampilanya seperti ini silahkan buka aplikasi Expo di hp temen-temen dan scan QR Code ny y, maka hasilnya seperti gambar di bawah ini :
