Konichiwa gaesssssss….. pada tutorial belajar react native ke 8 ini kita akan mencoba untuk membuat form login dan register aplikasi android menggunakan react native.
Untuk tutorial listview yang sudah saya janjikan pada tutorial sebelumnya tidak akan kita bahas. Karena saya yakin teman-teman sudah paham struktur react native hanya dengan membaca doc react native tentang listview. Jadi tutorial listview kita skip saja.
Perubahan file menjadi App.js
Oke sebelumnya banyak teman-teman yang baru belajar react native berkomentar setelah menjelajahi React Native ini dan kebingungan dengan perbedaan file yang telah di install pada tutorial pertama. Fix, ini bukanlah suatu stuck install atau corrupted file installed, jadi begini… memang baru bulan-bulan kemarin ada update file pada React Native, yang tadinya dia memakai file index.android.js atau index.ios.js sekarang telah berubah menjadi hanya satu file saja yaitu App.js.
Kemudian untuk pengembangan aplikasi android ataupun ios telah di package kedalam satu folder. Untuk pengembangan aplikasi android pada folder android juga untuk pengembangan aplikasi ios pada folder ios.
Mulai Menginstall dan Membuat Form
Oke jika masih belum paham kita akan coba install dari awal dengan kondisi semuanya sudah terinstall seperti nodejs, code editor, file jdk, file sdk, emulator android genymotion (telah terbuka), silahkan dibuka cmd nya lalu arahkan ke direktori yang akan temmman-teman simpan (disini saya memberi nama foldernya Login) kemudian beri perintah berikut pada cmd :
Npm install -g react-native-cli React-native init Login
Tunggu semua proses downloadnya, jika telah success tanpa failed arahkan kle direktori Login dan beri perintah berikut pada cmd :
Yarn React-native run-android
Maka, akan terbuka aplikasi yang telah kita install pada emulator. Tampilannya seperti berikut :
Disini kita telah melihat perbedaan yang dulu dan yang sekarang, jika dulu terdapat penjelasan “To get started edit index.android.js” tapi yang sekarang “To get started edit App.js”. Oke sekarang kita lanjut pada tutorial, silahkan ubah file App.js menjadi seperti berikut :
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { StyleSheet, View, StatusBar } from 'react-native'; import Routes from './src/Routes'; export default class App extends Component<{}> { render() { return ( <View style={styles.container}> <StatusBar backgroundColor="#1c313a" barStyle="light-content" /> <Routes/> </View> ); } } const styles = StyleSheet.create({ container : { flex: 1, } });
Oke setelah kita lihat pada code diatas terdapat module yang didalamnya ada beberapa komponen, maka kita akan membuat folder baru dengan nama src dan beberapa komponen didalamnya, silahkan buat folder dan file seperti yang terdapat dalam lingkaran berikut :
Yaitu :
src
components
Form.js
Logo.js
Images
Logo.png (bebas untuk logo)
Pages
Login.js
Signup.js
Routes.js
Oke.. setelah semuanya dibuat sekarang kita beri code pada file Form.js
import React, { Component } from 'react'; import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native'; export default class Logo extends Component<{}> { render(){ return( <View style={styles.container}> <TextInput style={styles.inputBox} underlineColorAndroid='rgba(0,0,0,0)' placeholder="Email" placeholderTextColor = "#ffffff" selectionColor="#fff" keyboardType="email-address" onSubmitEditing={()=> this.password.focus()} /> <TextInput style={styles.inputBox} underlineColorAndroid='rgba(0,0,0,0)' placeholder="Password" secureTextEntry={true} placeholderTextColor = "#ffffff" ref={(input) => this.password = input} /> <TouchableOpacity style={styles.button}> <Text style={styles.buttonText}>{this.props.type}</Text> </TouchableOpacity> </View> ) } } const styles = StyleSheet.create({ container : { flexGrow: 1, justifyContent:'center', alignItems: 'center' }, inputBox: { width:300, backgroundColor:'rgba(255, 255,255,0.2)', borderRadius: 25, paddingHorizontal:16, fontSize:16, color:'#ffffff', marginVertical: 10 }, button: { width:300, backgroundColor:'#1c313a', borderRadius: 25, marginVertical: 10, paddingVertical: 13 }, buttonText: { fontSize:16, fontWeight:'500', color:'#ffffff', textAlign:'center' } });
Lalu Logo.js
import React, { Component } from 'react'; import { StyleSheet, Text, View, Image } from 'react-native'; export default class Logo extends Component<{}> { render(){ return( <View style={styles.container}> <Image style={{width:40, height: 70}} source={require('../images/logo.png')}/> <Text style={styles.logoText}>Welcome to My app.</Text> </View> ) } } const styles = StyleSheet.create({ container : { flexGrow: 1, justifyContent:'flex-end', alignItems: 'center' }, logoText : { marginVertical: 15, fontSize:18, color:'rgba(255, 255, 255, 0.7)' } });
Lalu Login.js
import React, { Component } from 'react'; import { StyleSheet, Text, View, StatusBar , TouchableOpacity } from 'react-native'; import Logo from '../components/Logo'; import Form from '../components/Form'; import {Actions} from 'react-native-router-flux'; export default class Login extends Component<{}> { signup() { Actions.signup() } render() { return( <View style={styles.container}> <Logo/> <Form type="Login"/> <View style={styles.signupTextCont}> <Text style={styles.signupText}>Dont have an account yet?</Text> <TouchableOpacity onPress={this.signup}><Text style={styles.signupButton}> Signup</Text></TouchableOpacity> </View> </View> ) } } const styles = StyleSheet.create({ container : { backgroundColor:'#455a64', flex: 1, alignItems:'center', justifyContent :'center' }, signupTextCont : { flexGrow: 1, alignItems:'flex-end', justifyContent :'center', paddingVertical:16, flexDirection:'row' }, signupText: { color:'rgba(255,255,255,0.6)', fontSize:16 }, signupButton: { color:'#ffffff', fontSize:16, fontWeight:'500' } });
Lalu Signup.js
import React, { Component } from 'react'; import { StyleSheet, Text, View, StatusBar , TouchableOpacity } from 'react-native'; import Logo from '../components/Logo'; import Form from '../components/Form'; import {Actions} from 'react-native-router-flux'; export default class Signup extends Component<{}> { goBack() { Actions.pop(); } render() { return( <View style={styles.container}> <Logo/> <Form type="Signup"/> <View style={styles.signupTextCont}> <Text style={styles.signupText}>Already have an account?</Text> <TouchableOpacity onPress={this.goBack}><Text style={styles.signupButton}> Sign in</Text></TouchableOpacity> </View> </View> ) } } const styles = StyleSheet.create({ container : { backgroundColor:'#455a64', flex: 1, alignItems:'center', justifyContent :'center' }, signupTextCont : { flexGrow: 1, alignItems:'flex-end', justifyContent :'center', paddingVertical:16, flexDirection:'row' }, signupText: { color:'rgba(255,255,255,0.6)', fontSize:16 }, signupButton: { color:'#ffffff', fontSize:16, fontWeight:'500' } });
Lalu Router.js
import React, { Component } from 'react'; import {Router, Stack, Scene} from 'react-native-router-flux'; import Login from './pages/Login'; import Signup from './pages/Signup'; export default class Routes extends Component<{}> { render() { return( <Router> <Stack key="root" hideNavBar={true}> <Scene key="login" component={Login} title="Login" initial={true}/> <Scene key="signup" component={Signup} title="Register"/> </Stack> </Router> ) } }
Terakhir buka emulator lalu tap double R pada keyboard, jika berhasil tanpa error maka tampilannya akan terlihat seperti berikut :
Oke… sekian tutorial kali ini, jika masih terdapat error bisa dilihat source codenya disini. sekian dan terimakasih sampai jumpa pada tutorial selanjutnya.