Basic React Native Part 15 - React Native Picker

Pada  Part 14 kita telah belajar dan mengenal Button jadi jika anda belum mengikuti tutorial Part 14 diharapkan anda mengikuti tutorial  Part 14 terlebih dahulu. Pada Tutorial Part 15 ini kita mengenal terlebih dahulu Basic React Native Picker.

Component React Native Picker adalah sebuah komponen untuk seleksi antara pilihan atau list yang berbeda sama seperti dropdown. User atau pengguna dapat digunakan ketika kita harus memberikan pilihan untuk memilih salah satu. ada beberapa jenis picker tersedia yang akan kita bahas pada Tutorial Pro satu per satu. Kita akan mencoba Picker sederhana yang memiliki beberapa pilihan dan pengguna atau user harus memilih salah satu.

Picker yang akan kita bahas memiliki 2 mode

• dialog yaitu akan menunjukkan atau menampilkan dialog modal dan ini merupakan default.
• dropdown yaitu menampilkan atau menunjukkan drop down menu( seperti list - list mengarah ke bawah ) ke tampilan picker.

Mengimplementasikan Pada Project React Native

Buat Project React Native

Pada Tutorial Part 2 kita telah menginstall react-native-cli kemudian kita telah belajar cara membuat project baru react native. Berikut perintah cara untuk membuat project baru react native.

react-native init namafolderproject

Buat Project Baru

Install Aplikasi Debug Ke Handphone Android

Pada Tutorial Part 4 kita telah belajar cara menginstall Aplikasi Debug ke Handphone Android, untuk tata cara yang lebih jelas bisa langsung pelajari lagi pada Tutorial Part 4 terlebih dahulu. Secara singkat perintahnya seperti berikut.

react-native run-android

Install Aplikasi Debug Ke Handphone Android

Buka File App.js Dengan Visual Studio Code

Secara default pada file App.js memiliki code yang cukup dan menghasilkan tampilkan seperti berikut ini

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Step One</Text>
              <Text style={styles.sectionDescription}>
                Edit <Text style={styles.highlight}>App.js</Text> to change this
                screen and then come back to see your edits.
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>See Your Changes</Text>
              <Text style={styles.sectionDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Debug</Text>
              <Text style={styles.sectionDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Learn More</Text>
              <Text style={styles.sectionDescription}>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;

Code Default App.js

Tampilan Default File App.js

Menghapus Code Default App.js

Untuk memudahkan memahami component Picker kita hapus semua code dafault App.js. Setelah semua code default App.js dihapus maka ikuti langkah - langkah berikut ini.

• Import React

import React, { Component } from 'react'

import react

• Import Component Yang Dibutuhkan Untuk Project React Native

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

Import Component

• Membuat Class Componet

class App extends Component {
  render() { 
    return (  );
  }
}
 

Membuat Class

• Kemudian tambahakan code state di dalam class

class App extends Component {
  //Tambahkan code state berikut
    state = {
    namaTempat: '',
  }

  render() { 
    return (  );
  }
}
 

Menambahkan state

• Kemudian tambahkan code berikut ini didalam return

class App extends Component {
 //Tambahkan code state
 state = {
    namaTempat: '',
  }

  render() {
    return (
    //tambahkan code ini
        <View style={{flex:1, justifyContent: 'center', alignItems:'center' }}>
        <Text style={{ fontSize: 10, textAlign: 'center' }}>Lokasi Anda</Text>
        <Text style={{ fontSize: 6, textAlign: 'center' }}>{this.state.namaTempat}</Text>

        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems:'center' }}>
          <Picker
            selectedValue={this.state.namaTempat}
            onValueChange={(itemValue) => this.setState({ namaTempat: itemValue })}
            style={{ width: '80%', color: '#000', fontWeight: 'bold' }}
            >
            <Picker.Item label="Cari Lokasi Anda" />
            <Picker.Item label='Kabupaten Bantul' value='Bantul' />
            <Picker.Item label='Kabupaten Gunung Kidul	' value='GunungKidul' />
            <Picker.Item label='Kabupaten Kulon Progo' value='KulonProgo' />
            <Picker.Item label='Kabupaten Sleman' value='Sleman' />
            <Picker.Item label='Kota Yogyakarta' value='Yogyakarta' />
          </Picker>
         </View>
         </View>
    );
  }
}

Code Picker

• Kemudian export class App

export default App

Export Class

• Code Lengkap

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

class App extends Component {
  state = {
    namaTempat: '',
  }

  render() {
    return (
        <View style={{flex:1, justifyContent: 'center', alignItems:'center' }}>
        <Text style={{ fontSize: 10, textAlign: 'center' }}>Lokasi Anda</Text>
        <Text style={{ fontSize: 6, textAlign: 'center' }}>{this.state.namaTempat}</Text>

        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems:'center' }}>
          <Picker
            selectedValue={this.state.namaTempat}
            onValueChange={(itemValue) => this.setState({ namaTempat: itemValue })}
            style={{ width: '80%', color: '#000', fontWeight: 'bold' }}
            >
            <Picker.Item label="Cari Lokasi Anda" />
            <Picker.Item label='Kabupaten Bantul' value='Bantul' />
            <Picker.Item label='Kabupaten Gunung Kidul	' value='GunungKidul' />
            <Picker.Item label='Kabupaten Kulon Progo' value='KulonProgo' />
            <Picker.Item label='Kabupaten Sleman' value='Sleman' />
            <Picker.Item label='Kota Yogyakarta' value='Yogyakarta' />
          </Picker>
         </View>
         </View>
    );
  }
}
export default App;

Code Lengkap Picker Dialog

• Tampilan Picker Dialog

Picker

Demikian pembahasan Tutorial Part 15 ini akan kita lanjutkan pada Tutorial Part 16

Catatan: tulisan ini dipindahkan dari cloudborneo.com, terbit pertama 3 Januari 2020.