Belajar React Native , Lesson 2

       Halo lagi, selamat datang pada lesson 2 dengan tema React Native. Saya nggak perlu menjelaskan lagi kan tentang apa itu react, silahkan baca lesson 1 jika belum tahu. oke langsung saja, setelah membuat aplikasi sedehana pada lesson 1, kali ini kita akan belajar memodifikasi agar mengenal lebih jauh seputar React Native. mengingatkan kembali program pertama kita kemarin :



Ini tampilan aplikasi pertama yang kita rancang pada lesson 1, nah sekarang kita akan mencoba mengedit atau memodifikasi tampilannya, dengan cara membuka X-Code pada mac. 
buka file index.ios.js dengan X-Code,
Codingan Awal


Nah setelah terbuka, mari kita mulai buka codingannya, edit bagian ini :
<View style={styles.container}><Text style={styles.welcome}> Halo Pemirsaaaa </Text><Text style={styles.instructions}> Ini React Native kedua saya </Text> <Text style={styles.instructions}> selamat Belajar </Text> </View>
kemudian Reload ios simulatornya dengan cara Command+R, maka tampilan akan berganti menjadi seperti ini :
Setelah di edit
sudah bisakah ??
nah sekarang kita akan bermain ke tahap selanjutnya, kali ini kita akan belajar membuat splash screen untuk aplikasi IOS kita. Langkah pertama kita buat aplikasi baru, menggunakan terminal, saya memberi nama FarellApp dengan perintah :

react-native init FarellApp
Lalu tunggu beberapa detik sampai proses selesai, kemudian agar memudahkan soal posisi, kita pindahkan folder app kita dari user ke dalam folder yang di inginkan, kali ini saya pindahkan ke dalam folder documents. 
mv FarellApp Documents
Setelah foldernya pindah, sekarang kita akan memasukannya ke dalam editor kita,  kali ini agar tidak mono, saya gunakan editor yang ringan dan santai. Saya menggunakan editor Sublime Text, kenapa ?? seperti yang saya bilang di atas, ringan dan santai.  teman teman dapat menginstallnya lewat app store, atau langsung ke websitenya. X-Code saya simpang dulu untuk nanti. Buka Sublimenya, lalu tarik folder app tadi dari finder ke dalam sublime, maka akan muncul tampilan :




setelah selesai, edit tulisan viewnya sesuai selera. kali ini kita buat halaman "splash screen", pilih new file lalu beri nama Splash.js kemudian ketik code berikut :
 import React, {Component} from 'React';import {View, Text,StyleSheet } from 'react-native';export default class Splash extends Component {
render(){ return( <View style={styles.wrapper} >  <Text style={styles.title}> Hello World </Text> <Text> Powered by Farell </Text> </View> ); }

}
const styles =StyleSheet.create({ wrapper:{ backgroundColor: 'blue', flex:1, justifyContent: 'center', alignItems:'center' }, title:{ color: 'white', fontSize: 35, fontWeight : 'bold' }

});




lalu bukalah file index.ios.js kemudian edit bagian view dan tambahkan beberapa code seperti potongan berikut :
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
  import Splash from './Splash';
export default class FarellApp extends Component {
  render() {
    return (
      <Splash/>
    );
  }
}



Silahkan di Command+R pada IOS simulatornya lalu akan terlihat seperti berikut :

nah sekian dulu untuk lesson 2 ini, silahkan edit dan modifikasi sebagus mungkin menurut rasa dan kebutuhan masing masing, sampai ketemu di lesson 3.




Postingan populer dari blog ini

Belajar React Native, lesson 1

Teknik Komunikasi I/O

cara mengupdate firefox di UBUNTU 10.04 LTS