Basic React Native Part 7 - React Native Text
Pada Part 6 kita telah belajar dan mengenal Component View jadi jika anda belum mengikuti tutorial Part 6 diharapkan anda mengikuti tutorial Part 6 terlebih dahulu.
Pada Tutorial Part 7 ini kita mengenal terlebih dahulu Basic React Native Text. Komponen React Native selanjutnya adalah Komponen Text merupakan salah satu komponen react native yang berfungsi untuk menampilkan Text yang mendukung untuk nesting, styling, and touch handling.
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 componen Text kita hapus semua code dafault App.js. Setelah semua code default App.js dihapus maka ikuti langkah - langkah berikut ini.
Code Versi 1
- Import React
import React, { Component } from 'react'
- Import Component Yang Dibutuhkan Untuk Project React Native
import {
View,
Text
}from 'react-native'- Membuat Class Componet
class App extends Component {
render() {
return ( );
}
}
- Tambahan Component View dan Text di dalam
return()
class App extends Component {
render() {
return (
//Tambahkan Component View
<View>
<Text>Menggunakan Component Text</Text>
</View>
);
}
}
- Jangan Lupa di export class App dengan code berikut ini
export default App- berikut code lengkapnya
import React, {Component} from 'react'
import {
View,
Text
}from 'react-native'
class App extends Component {
render() {
return (
<View>
<Text>Menggunakan Component Text</Text>
</View>
);
}
}
export default App;
Code Versi 1
- Import React
import React, { Component } from 'react'
- Import Component Yang Dibutuhkan Untuk Project React Native
import {
View,
Text
}from 'react-native'- Membuat Class Componet
class App extends Component {
render() {
return ( );
}
}
- Tambahan Component View dan Text di dalam
return()
class App extends Component {
render() {
return (
//Tambahkan Component View dan Text
<View>
<Text>
<Text>First part and </Text>
<Text>second part</Text>
</Text>
</View>
);
}
}
- Jangan Lupa di export class App dengan code berikut ini
export default App- berikut code lengkapnya
import React, { Component } from 'react'
import {
View,
Text
} from 'react-native'
const App = () => {
return (
<View>
<Text>
<Text>First part and </Text>
<Text>second part</Text>
</Text>
</View>
)
}
export default App;
Demikianlah Pembahasan Tutorial Part 7 ini akan kita lanjutkan pada Tutorial Part 8