Basic React Native Part 21 - React Native WebView
Pada Part 20 kita telah belajar dan mengenal Modal jadi jika anda belum mengikuti tutorial Part 20 diharapkan anda mengikuti tutorial Part 20 terlebih dahulu. Pada Tutorial Part 21 ini kita mengenal terlebih dahulu Basic React Native Webview.
Apa itu WebView ? WebView merupakan komponen untuk membuat halaman web ke dalam aplikasi mobile. Fitur ini sudah bisa digunakan untuk platfrom android dan ios. Dengan ada fitur WebView ini sangat berguna bagi para pembisnis yang sebelum sudah ada website sendiri namum belum ada aplikasi android. Fitur ini hadir untuk mempercepat dalam merubah sebuah website ke dalam bentuk aplikasi android dan tentu harga pembuatan nya sangat murah. Untuk detailnya anda bisa baca di website ini
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 namafolderprojectInstall 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-androidBuka 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;
Menghapus Code Default App.js
Untuk memudahkan memahami component WebView kita hapus semua code dafault App.js. Setelah semua code default App.js dihapus maka ikuti langkah - langkah berikut ini.
- Install Library WebView.
npm install --save react-native-webview- Import React
import React, { Component } from 'react'
- Import Component WebView Untuk Project React Native dari Libaray WebView
import { WebView } from 'react-native-webview';
- Membuat Class Componet
class App extends Component {
render() {
return ( );
}
}
- Kemudian tambahan code berikut ini didalam
return.
return (
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{marginTop: 20}}
/>
);Hal perlu diperhatikan adalah pada props source , props ini yang menentukan website yang ditampilkan pada aplikasi android nya nanti. Jadikan kalian ingin menampilkan website lain, tidak perlu sudah payah cukup ganti link website tersebut.
- Setelah itu export class App.
export default App- Berikut Code lengkap nya
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
class App extends Component {
render() {
return (
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{marginTop: 20}}
/>
);
}
}
export default App- Tampilan Webview
Demikianlah pembahasan Tutorial Part 21 ini akan kita lanjutkan pada Tutorial Part 22.