Basic React Native Part 16 - React Native Switch

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

React Native memiliki sebauh component yang berfungsi untuk mengrender suatu inputan yang bertype data boolean. ini merupakan component react native yang dikendalikan dan memerlukan onValueChange callback bahwa pembaruan nilai prop agar komponen untuk memberikan tindakan pengguna. Jika nilai prop tidak diperbarui, komponen akan terus membuat nilai yang disediakan prop bukan hasil yang diharapkan dari setiap tindakan pengguna.

komponen switch digunakan untuk melakukan on-off jenis fungsi di kedua android dan ios aplikasi. komponen saklar menjadikan nilai dan kembali boolean output dalam bentuk True & False.

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,
  Switch
} from 'react-native';

Import Component

• Membuat Class Componet

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

Membuat Class

• Kemudian tambahakan code state dan function di dalam class

class App extends Component {
//  1. Buat state
  state = {
    nilaiDefault:false
  }

// 2. Buat Function
  aksiSwitch = (value) => {
    this.setState({nilaiDefault: value})
 }
  render() { 
    return (  );
  }
}
 

State dan Function

• Setelah itu tambahkan code pada return

class App extends Component {
//  1. Buat state
  state = {
    nilaiDefault:false
  }

// 2. Buat Function
  aksiSwitch = (value) => {
    this.setState({nilaiDefault: value})
 }
  render() { 
    return (
      // 3.Tambahkan Component
        <View style={{flex:1, justifyContent: 'center', alignItems:'center' }}>
       <Text>{this.state.nilaiDefault?'Switch is ON':'Switch is OFF'}</Text>
       <Switch
          style={{marginTop:30}}
          onValueChange = {this.aksiSwitch}
          value = {this.state.nilaiDefault}/>
         </View>
    );
  }
}
 

Code Return

• Kemudian export class App

export default App;

Export Class

• Code Lengkap

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

class App extends Component {
//  1. Buat state
  state = {
    nilaiDefault:false
  }

// 2. Buat Function
  aksiSwitch = (value) => {
    this.setState({nilaiDefault: value})
 }

  render() {
    return (
      // 3.Tambahkan Component
        <View style={{flex:1, justifyContent: 'center', alignItems:'center' }}>
       <Text>{this.state.nilaiDefault?'Switch is ON':'Switch is OFF'}</Text>
       <Switch
          style={{marginTop:30}}
          onValueChange = {this.aksiSwitch}
          value = {this.state.nilaiDefault}/>
         </View>
    );
  }
}
export default App;

Code Lengkap

• Tampilan Switch

Tampilan Switch

Demikianlah Pembahasan Tutorial Part 16 Ini Akan Kita Bahas Pada Tutorial Part 17

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