Basic React Native Part 12 - React Native Image

React Native • Jan 02, 2020

Pada  Part 11 kita telah belajar dan mengenal TextInput jadi jika anda belum mengikuti tutorial Part 11 diharapkan anda mengikuti tutorial  Part 11 terlebih dahulu.

Pada Tutorial Part 12 ini kita mengenal terlebih dahulu Basic React Native Image. Image merupakan komponen untuk menampilkan berbagai jenis gambar baik itu gambar dari jaringan, gambar lokal sementara, dan gambar dari disk lokal, seperti kamera roll.

Untuk menampilkan Gambar pada React Native memiliki 4 cara yaitu :

  • Static Image Resources
  • Network Requests for Images
  • Uri Data Images
  • SVG Images

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
Tampilan Default File App.js

Menghapus Code Default App.js

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

Static Image Resources

Metode ini kita harus menyimpan gambar ke dalam project kita, maka buat sebuah folder baru dengan nama src kemudian folder baru lagi didalam folder src  dengan nama image . Di dalam folder image inilah anda letakan gambar - gambar yang ingin anda masuk atau tampilkan dilayar aplikasi. Untuk cara pembuatan Folder saya anggap anda sudah bisa karena pada Tutorial Part sebelumnya karena kita sudah sering membuat Folder atau File baru.  

Folder dan File Gambar
  • Import React
import React, { Component } from 'react'
import react
  • Import Component Yang Dibutuhkan Untuk Project React Native
import {
View,
Image,
StyleSheet
}from 'react-native'
Import Component
  • Membuat Class Componet
class App extends Component {
  render() { 
    return (  );
  }
}
Membuat Class
  • Kemudian tambahan Component View , Image untuk menampilkan gambar car.png
class App extends React.Component {
  render() {
    return (
     // tambahkan Component View , Image
      <View style={styles.container}>
        <Image
          source={require('./src/image/car.png')}
          style={{ width: 400, height: 400 }}
        />
      </View>
    )
  }
}
Component View dan Image
  • Kemudian tambahkan code style setelah nya
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
})
Styling Image
  • Dan jangan lupa di export class
export default App
Export class App
  • Hasil Gambar Menggunakan Metode Static Image Resources
Static Image Resources

Network Requests for Images

Langkah - langkah sama saja seperti langkah - langkah diatas cukup menganti metode Panggil nya  Image saja.

 <Image
          source={{ uri: 'https://cloudborneo.com/content/images/2019/12/66-3.png' }}
          style={{ width: 100, height: 100 }}
        />
Network Requests for Images

Uri Data Images

      <Image
          style={{ width: 200, height: 158 }}
          source={{ uri: 'data:image/png;base64,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' }}
        />
Uri data Image
Uri data Image

SVG Images

Untuk gambar format svg kita tidak bisa menggunakan Component Image dari react nativenya kita harus menginstall Package Library Tambah dengan menjalankan perintah berikut melalui terminal linux dengan posisi berada di folder project react native yang akan diinstall library tersebut.

	
npm install react-native-remote-svg --save
Install Library

Kemudian setelah diinstall, sekarang Import Component Image menggunakan dari Library SVG dan tidak perlu menggunakan Component Image dari react native.


import {Image} from ‘react-native-remote-svg’
Import Component Image Dari Library SVG

Demikianlah pembahsan Tutorial Part 12 ini akan kita lanjutkan pada Tutorial Part 13

Wandi Pratama

Saya seorang Developer Mobile menggunakan Framework React Native dan saya juga memiliki pengalaman dibidang SYS Admin. Jasa menerima jasa pembuatan aplikasi dan website https://pindahdigital.com

Recommended for you

No results for your search, try something different.