Trong React Native, các phương pháp styling component có nhiều điểm tương đồng với ReactJS, nhưng có những điểm riêng biệt phù hợp với việc phát triển ứng dụng mobile.

Inline styles

React Native cho phép bạn áp dụng styles trực tiếp vào các component thông qua thuộc tính style bằng cách sử dụng object style

import React from 'react';
import { View, Text } from 'react-native';

const MyComponent = () => {
  return (
    <View style={{ padding: 10, backgroundColor: 'lightgrey' }}>
      <Text style={{ color: 'blue' }}>Hello, World!</Text>
    </View>
  );
};

export default MyComponent;

StyleSheet API

React Native cung cấp StyleSheet API để định nghĩa và quản lý các styles trong một static object, giúp cải thiện performance và tổ chức code tốt hơn

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
    backgroundColor: 'lightgrey',
  },
  text: {
    color: 'blue',
  },
});

export default MyComponent;

Styled Components

Styled Components cũng có thể được sử dụng trong React Native. Thư viện này cho phép bạn sử dụng CSS-in-JS để tạo ra các component styled với CSS và các styles này được scoped mặc định

import React from 'react';
import styled from 'styled-components/native';

const Container = styled.View`
  padding: 10px;
  background-color: lightgrey;
`;

const StyledText = styled.Text`
  color: blue;
`;

const MyComponent = () => {
  return (
    <Container>
      <StyledText>Hello, World!</StyledText>
    </Container>
  );
};

export default MyComponent;

CSS-in-JS Libraries

Ngoài Styled Components, có nhiều thư viện CSS-in-JS khác như Emotion và JSS, hỗ trợ cả ReactJS và React Native

Tại sao không nên style component bằng inline CSS

Performance

Mỗi lần re-render, một object style mới được tạo. Điều này có thể làm giảm hiệu suất của app, đặc biệt là trong các application lớn hoặc khi component được render lại nhiều lần
Khả năng reuse

Inline styles không thể tái sử dụng. Nếu bạn cần apply một style cho nhiều component, bạn sẽ phải sao chép và dán các object style đó vào nhiều nơi, làm khó bảo trì
Khó quản lý và duy trì

Việc quản lý và duy trì các styles có thể trở nên khó khăn nếu các styles được phân tán khắp nơi trong component.

Khi nào nên dùng `StyleSheet`?

Cải thiện hiệu suất: StyleSheet.create giúp tạo ra một object style tĩnh, tránh việc tạo lại styles mỗi khi component re-render.
Quản lý styles tốt hơn: Styles được tách riêng ra khỏi logic của component, giúp code dễ đọc và dễ bảo trì hơn.
Dễ dàng tái sử dụng: Styles được định nghĩa một lần và có thể được sử dụng ở nhiều nơi.

Q4. Mô tả các phương pháp styling component trong React Native?