BÀI 6 - THIẾT KẾ STYLE CHO COMPONENT TRONG REACT NATIVE
Video bài học
Cách thiết như ảnh trên giống bên dưới nhé
Trong file component thì thiết kế style cho từng phần tử bên trong nó như này
import React from "react";
import { Image, StyleSheet, Text, View } from 'react-native';
import IconImage from '../assets/icons8-user-64.png';
export default function ListComponents(props) {
return (
<View style={styles.container}>
<Text style={styles.title}>Component đầu tiên</Text>
<Image style={styles.categoryImage} source={IconImage} />
</View>
);
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
padding: 16,
borderRadius: 4,
backgroundColor: '#FFF',
// Android
elevation: 5,
// IOS
shadowColor: '#000',
shadowOpacity: 0.3,
shadowRadius: 10,
shadowOffset: { height: 0, width: 0 },
marginBottom: 16
},
categoryImage: {
height: 46,
width: 46
},
title:{
textTransform: 'uppercase',
marginBottom: 8,
fontWeight: '700'
}
})
Và trong App.js thì thiết kế style lại như này
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import ListComponents from './Components/ListComponents';
export default function App() {
return (
<View style={styles.container}>
<ListComponents />
<ListComponents />
<ListComponents />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'stretch',
justifyContent: 'center',
paddingLeft: 16,
paddingRight: 16
},
});
Tham khảo thêm