1) Flexbox
Dengan Flexbox dapat membuat ukuran tinggi lebar komponen secara responsif yang artinya akan menyesuaikan dengan ukuran perangkat layar yang digunakan untuk mengaksesnya. Untuk mendapatkan posisi tata letak yang responsif dapat mengkombinasikan property flexDirection, alignItems, dan justifyContent. Pada tabel berikut menunjukan deskripsi dari masing-masing property :
Berikut contoh sintaks Flex untuk membuat sebuah box yang
dinamis :
App.js
import React, { Component } from "react";
import { View, StyleSheet } from "react-native";
const App = () => {
return (
<View>
<View style={styles.containerRow}>
<View style={[styles.redbox, styles.lingkaran, { flex: 1 }]} />
<View style={[styles.bluebox, styles.lingkaran, { flex: 1 }]} />
<View style={[styles.blackbox, styles.lingkaran, { flex: 1 }]} />
<View style={[styles.greenbox, styles.lingkaran, { flex: 1 }]} />
</View>
<View style={styles.containerRow}>
<View style={styles.containerColumn}>
<View style={[styles.redbox, { marginBottom: 5 }]} />
<View style={[styles.bluebox, { marginBottom: 5 }]} />
<View style={[styles.blackbox, { marginBottom: 5 }]} />
</View>
<View style={styles.containerColumn}>
<View style={[styles.redbox, { marginBottom: 5 }]} />
<View style={[styles.bluebox, { marginBottom: 5 }]} />
<View style={[styles.blackbox, { marginBottom: 5 }]} />
</View>
<View style={styles.containerColumn}>
<View style={[styles.redbox, { marginBottom: 5 }]} />
<View style={[styles.bluebox, { marginBottom: 5 }]} />
<View style={[styles.blackbox, { marginBottom: 5 }]} />
</View>
<View style={styles.containerColumn}>
<View style={[styles.redbox, { marginBottom: 5 }]} />
<View style={[styles.bluebox, { marginBottom: 5 }]} />
<View style={[styles.blackbox, { marginBottom: 5 }]} />
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
containerRow: {
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
backgroundColor: "white",
marginBottom: 15,
},
containerColumn: {
flexDirection: "column",
marginRight: 5,
backgroundColor: "white",
},
redbox: {
width: 100,
height: 100,
backgroundColor: "red",
},
bluebox: {
width: 100,
height: 100,
backgroundColor: "blue",
},
blackbox: {
width: 100,
height: 100,
backgroundColor: "black",
},
greenbox: {
width: 100,
height: 100,
backgroundColor: "green",
},
lingkaran: {
borderRadius: 50,
margin: 3,
},
});
export default App;
Outputnya:
2) ListView
Berikutnya pembuatan listView. Dalam membuat sebuah list
digunakan method map(). Method tersebut akan melakukan iterasi
sebuah array dari item dan merendernya masing-masing. Berikut
contoh penggunaan List View :
App.jsx
import React, { Component } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
const App = () => {
return <ListView></ListView>;
};
export default App;
class ListView extends Component {
state = {
names: [
{ name: "Ben", id: 1 },
{ name: "Susan", id: 2 },
{ name: "Robert", id: 3 },
{ name: "Mary", id: 4 },
{ name: "Daniel", id: 5 },
],
};
alertItemName = (item) => {
alert(item.name);
};
render() {
return (
<View>
{this.state.names.map((item, index) => (
<TouchableOpacity key={item.id} style={styles.item} onPress={() => this.alertItemName(item)}>
<Text style={styles.text}>{item.name}</Text>
</TouchableOpacity>
))}
</View>
);
}
}
const styles = StyleSheet.create({
item: {
justifyContent: "space-between",
alignItems: "center",
padding: 30,
margin: 2,
borderColor: "#2a4944",
borderWidth: 1,
backgroundColor: "#d2f7f1",
},
text: {
color: "black",
alignItems: "center",
},
});
Outputnya:
3) ScrollView
Pembangunan aplikasi terkadang membutuhkan banyak komponen,
elemen, dan halaman yang panjang. Untuk mendukung hal tersebut,
React Native memiliki elemen ScrollView. Elemen ini harus
diletakkan di dalam komponen View dan memiliki tag penutup.
Pembuatan ScrollView dapat dilakukan dengan dua cara yaitu :
ScrollView Vertikal
App.jsx
import React, { Component } from "react";
import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
const App = () => {
return <Scrollview></Scrollview>;
};
export default App;
class Scrollview extends Component {
state = {
names: [
{ name: "Ben", id: 1 },
{ name: "Susan", id: 2 },
{ name: "Robert", id: 3 },
{ name: "Mary", id: 4 },
{ name: "Daniel", id: 5 },
{ name: "Laura", id: 6 },
{ name: "John", id: 7 },
{ name: "Debra", id: 8 },
{ name: "Aron", id: 9 },
{ name: "Ann", id: 10 },
{ name: "Steve", id: 11 },
{ name: "Olivia", id: 12 },
],
};
alertItemName = (item) => {
alert(item.name);
};
render() {
return (
<View>
<ScrollView>
{this.state.names.map((item, index) => (
<TouchableOpacity key={item.id} style={styles.item} onPress={() => this.alertItemName(item)}>
<Text style={styles.text}>{item.name}31</Text>
</TouchableOpacity>
))}
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
item: {
justifyContent: "space-between",
alignItems: "center",
padding: 30,
margin: 2,
borderColor: "#2a4944",
borderWidth: 1,
backgroundColor: "#d2f7f1",
},
text: {
color: "black",
alignItems: "center",
},
});
Outputnya :
ScrollView Horizontal
App.jsx
import React, { Component } from "react";
import { View, StyleSheet, ScrollView } from "react-native";
const App = () => {
return (
<View>
<View style={styles.containerRow}>
<ScrollView horizontal={true}>
<View style={[styles.redbox, styles.lingkaran]} />
<View style={[styles.bluebox, styles.lingkaran]} />
<View style={[styles.blackbox, styles.lingkaran]} />
<View style={[styles.greenbox, styles.lingkaran]} />
<View style={[styles.greenbox, styles.lingkaran]} />
<View style={[styles.greenbox, styles.lingkaran]} />
</ScrollView>
</View>
</View>
);
};
const styles = StyleSheet.create({
containerRow: {
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
backgroundColor: "white",
marginBottom: 15,
},
redbox: {
width: 100,
height: 100,
backgroundColor: "red",
},
bluebox: {
width: 100,
height: 100,
backgroundColor: "blue",
},
blackbox: {
width: 100,
height: 100,
backgroundColor: "black",
},
greenbox: {
width: 100,
height: 100,
backgroundColor: "green",
},
lingkaran: {
borderRadius: 50,
margin: 3,
},
});
export default App;
Outputnya :
Top comments (0)