Ceritanya lagi mulai belajar mobile programming pake React Native. Kali ini adalah latihan membuat layout.

import React from 'react';
import {Alert, StyleSheet, Text, Image, View, TextInput,Button } from 'react-native';

export default class LoginPage extends React.Component{
    constructor(props){
        super(props)
        this.state={
            username:'',
            password:''
        }
    }
    _onPressLogin = () =>{
        if(this.state.username=='admin' && this.state.password=='secret') {
            Alert.alert("Login success!") 
            this.setState({ username: '' })
            this.setState({ password: '' })

        }else{
            Alert.alert("Login failed")
            this.setState({password:''})
        }
    }

    _onPressCancel = () =>{
        this.setState({ username: '' })
        this.setState({ password: '' })
    }

    render() {
        return (
            <View style={styles.container}>
                <Image style={styles.image} source={require('../assets/logo.png')} ></Image>
                <TextInput style={styles.username} placeholder="Username" value={this.state.username} onChangeText={(text) => this.setState({ username:text })}></TextInput>
                <TextInput style={styles.password} placeholder="Password" value={this.state.password} secureTextEntry={true} onChangeText={(text) => this.setState({ password: text })} ></TextInput>
                <View style={styles.loginButton}>
                    <Button title="Login" onPress={this._onPressLogin} color="#841584" ></Button>
                </View>
                <View style={styles.loginButton}>
                    <Button title="Cancel" onPress={this._onPressCancel} color="#FFEB3B" ></Button>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor:'#2196F3'
    },
    image:{
        height:100,
        width:100
    },
    username:{
        backgroundColor:'white',
        borderRadius: 5,
        width:'90%',
        padding: 5,
        marginBottom: 10,
    },
    password: {
        backgroundColor: 'white',
        borderRadius: 5,
        width: '90%',
        padding: 5,
        marginBottom: 10,
    },
    loginButton:{
        width:'90%',
        marginBottom: 10,
    }
});

Hasilnya jadi begini

Pada kode di atas, terdapat juga fungsi untuk implementasi state dan event handling pada komponen tombol yang saya terapkan pada saat input diisi maka state diubah sesuai isi text input. Selanjutnya ketika tombol ditekan, maka state tersebut akan diperiksa isinya.

Ya masih jauh dari kata sempurna, tetapi lumayan untuk pemula