React Native Styling: Các thành phần được tạo kiểu, Bố cục Flexbox, v.v.

React Native cung cấp một API để tạo các biểu định kiểu và tạo kiểu cho các thành phần của bạn: StyleSheet.

import React, { Component } from 'react'; import { StyleSheet, View, Text } from 'react-native'; export default class App extends Component { render () { return (  I am a header! I am some blue text.  ); } } const styles = StyleSheet.create({ header: { fontSize: 20 }, text: { color: 'blue' } });

Mặc dù các bảng định kiểu CSS thông thường không hợp lệ, nhưng tập hợp CSS của React Native rất giống với CSS truyền thống.

Nhiều thuộc tính CSS (ví dụ color, height, top, right, bottom, left) đều giống nhau trong stylesheet. Bất kỳ thuộc tính CSS có dấu gạch nối (ví dụ font-size, background-color) phải được thay đổi để camelCase (ví dụ fontSize, backgroundColor).

Không phải tất cả các thuộc tính CSS đều tồn tại trong StyleSheet. Vì không có khái niệm thực sự về di chuột trên thiết bị di động, các thuộc tính di chuột trong CSS không tồn tại trong React Native. Thay vào đó, React Native cung cấp các thành phần Touchable đáp ứng các sự kiện chạm.

Các kiểu cũng không được kế thừa như trong CSS truyền thống. Trong hầu hết các trường hợp, bạn phải khai báo kiểu của từng thành phần.

Bố cục Flexbox

React Native sử dụng triển khai flexbox tương tự như tiêu chuẩn web. Theo mặc định, các mục trong chế độ xem sẽ được đặt thành display: flex.

Nếu không muốn sử dụng flexbox, bạn cũng có thể sắp xếp các thành phần React Native thông qua relativehoặc absoluteđịnh vị.

Flexbox trong React Native được mặc định thành flexDirection: column, thay vì flex-direction: row(tiêu chuẩn web). Các columngiá trị hiển thị mục linh hoạt theo chiều dọc, trong đó chứa các thiết bị di động theo hướng dọc.

Để tìm hiểu thêm về flexbox, hãy truy cập hướng dẫn chi tiết này về CSS-Tricks và cách tiếp cận học tập được đánh giá cao với Flexbox Froggy.

Các thành phần được tạo kiểu

Bao gồm nhiều kiểu trong một tệp với một thành phần không phải lúc nào cũng dễ duy trì. Các thành phần được tạo kiểu có thể giải quyết vấn đề này.

Ví dụ, một thành phần Nút có thể được sử dụng ở nhiều nơi trên một ứng dụng. Việc sao chép và dán đối tượng kiểu với mỗi phiên bản Nút sẽ không hiệu quả. Thay vào đó, hãy tạo thành phần Nút được tạo kiểu, có thể tái sử dụng:

import React from 'react'; import { Text, TouchableOpacity } from 'react-native'; const Button = ({ onPress, children }) => { const { buttonStyle, textStyle } = styles; return (   {children}   ); }; export default Button; const styles = { textStyle: { alignSelf: 'center', color: '#336633', fontSize: 16, fontWeight: '600', paddingTop: 10, paddingBottom: 10 }, buttonStyle: { backgroundColor: '#fff', borderWidth: 1, borderColor: '#336633', paddingTop: 4, paddingBottom: 4, paddingRight: 25, paddingLeft: 25, marginTop: 10, width: 300 } };

Có thể dễ dàng nhập và sử dụng thành phần Nút được tạo kiểu trên ứng dụng mà không cần khai báo nhiều lần đối tượng kiểu:

import React, { Component } from 'react'; import { TextInput, View } from 'react-native'; import Button from './styling/Button'; export default class Login extends Component { render() { return (    Log In  ); } }

Thư viện để tạo kiểu

Có một số thư viện phổ biến để tạo kiểu React Native. Một số trong số chúng cung cấp các tính năng tương tự như Bootstrap, bao gồm các biểu mẫu mặc định, kiểu nút và các tùy chọn bố cục trang.

Một trong những thư viện phổ biến nhất là các thành phần được tạo kiểu. Bạn có thể tìm thấy nhiều ứng dụng khác trên npm và GitHub để tự mình thử.