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