Thuộc tính Style trong React Native

Tìm hiểu về Style trong React Native, đây là phần tuy căn bản nhưng là nền tảng và rất quan trọng trong quá trình lập trình ứng dụng sử dụng React Native sau này.

1. Style trong React Native

Với React Native, chúng ta có thể xây dựng giao diện cho ứng dụng bằng JavaScript. Tất cả các core component của React Native đều có một props có tên là style.

Giá trị của props style là style object trong đó tên thuộc tính được viết giống như CSS thông thuờng nhưng được viết theo định dạng camel casing. Ví dụ: backgroundColor = background-color. Bên dưới là một vài cách khai báo style trong React Native.

Khai báo style trực tiếp

Bài viết này được đăng tại [free tuts .net]

Chúng ta có thể đinh dạng style cho một component bằng cách truyền trực tiếp một obejct cho props style. Tất cả các core component trong React Native đều được có sẵn props này. Cách truyền vào một object trong JSX sẽ sử dụng 2 dấu ngoặc {{object}}.

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

export default function App() {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Text
        style={{
          color: "red",
        }}
      >
        Hello React Native !!!!
      </Text>
    </View>
  );
}

Khai báo bằng Stylesheet.create()

Khi một component có nhiều style khác nhau thì việc sử dụng StyleSheet.create() để tạo một style object sẽ giúp code được clean hơn. Để sử dụng cách này chỉ cần import StyleSheet và gọi phương thức create với tham số là một object chứa các style.

import React from "react";
// Nhớ import StyleSheet nhé !
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.largeText}>Hello React Native !!!!</Text>
    </View>
  );
}

// phương thức create sẽ có tham só là một object
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  largeText: {
    fontSize: 50,
  },
});

khi cần sử dụng style thì chỉ cần truyền vào prop style đối tượng styles tương ứng, ở ví dụ trên mình có gọi styles.containter, và styles.largeText.

Khai báo style ở file riêng

Khi sử dụng 2 cách trên thì không khả thi với các dự án thực tế, thông thường người ta sẽ chia các style ra các file riêng. Ở đây mình tạo một file có tên style.js với nội dung như sau:

import { StyleSheet } from "react-native";
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  largeText: {
    fontSize: 50,
  },
});
export default styles;

Trước tiên, chúng ta cần phải import thư viện StyleSheet trước, sau đó sẽ khai báo style bên trong phương thức StyleSheet.create() và sau khi hoàn tất thì phải export. Khi cần sử dụng tới style này ở 1 file thì chỉ cần import và sử dụng.

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

//Import file style vào
import styles from "./Style"
export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.largeText}>Hello React Native !!!!</Text>
    </View>
  );
}

2. Cấu trúc cho Style

Ở đây chúng ta sẽ có một vài tips để tổ chức style các component một cách khoa học và dễ dàng phát triển sau này. Bên dưới chỉ là một vài các cách cấu trúc mà theo mình nghĩ là hợp lí và không bắt buộc sử dụng.

Cấu trúc thư mục

Style là một phần khá quan trọng trong dự án bởi vậy chúng ta nên tạo riêng một thư mục cho nó. Đây là cấu trúc thư mục mà mình hay dùng trong một dự án.

MyReactNativeApp
  - src
    - assets
    - compontents
      - MyComponent.js
    - styles
      - colors.js
      - index.js
      - typography.js
      - ...
  ...

Hãy cố gắng chia nhỏ các thành phần ra nhiều file. Hơn nữa việc tổ chức như vậy không chỉ làm giảm thiểu việc sử dụng ../ trong các đường dẫn tương đối, mà còn cho phép tái cấu trúc và dễ hiểu hơn.

import { MyStyles } from "../styles"

thay vì dùng

import { MyStyles } from "../../../../common/utils/styles/my_styles"

Chia nhỏ các thành phần

Từ các style lớn, phức tạp chúng ta sẽ chia nhỏ nó ra các thành phần riêng biệt. Ở ví dụ bên dưới, Button sẽ có một vài thuộc tính như small, rounded, smallRounded,..

// buttons.js

export const small = {
  paddingHorizontal: 10,
  paddingVertical: 12,
  width: 75
};

export const rounded = {
  borderRadius: 50
};

export const smallRounded = {
  ...base,
  ...small,
  ...rounded
};

Khi sử dụng cách này sẽ dễ duy trì và bảo trì hơn theo cách thông thường.

Nhóm các thành phần

Nhóm các biến trong module lại với nhau và export nó trong file index.js. Nếu đặt một file index.js trong thư mục, chúng ta có thể tận dụng cú pháp import của JavaScript ES6 để import tất cả các styles cùng một lúc.

- styles
  - colors.js
  - index.js
  - spacing.js
  - typography.js
  - buttons.js

// src/styles/index.js

import * as Buttons from './buttons'
import * as Colors from './colors'
import * as Spacing from './spacing'
import * as Typography from './typography'

export { Typography, Spacing, Colors, Buttons }

Khi cần sử dụng chỉ cần import ở file styles/index.js

// src/MyComponent/index.js

import { Typography, Colors, Spacing } from '../styles'

...

const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.background,
    alignItems: 'center',
    padding: Spacing.base,
  },
  header: {
    flex: 1,
    ...Typography.mainHeader,
  },
  section: {
    flex: 3,
    ...Typography.section,
  }
})

Trên đây là những kiến thức cơ bản về Style trong React Native. Mong bài viết này có thể giúp ích cho bạn cho việc lập trình ứng dụng di động với React Native, cảm ơn bạn đã quan tâm bài viết này.