GALAXY TECH
Chuyên gia Công nghệ
Thứ tư, 12/02/2020 | 00:00 GMT+7

Tạo kiểu ứng dụng React Native

Nếu bạn đã từng sử dụng React Native, bạn có thể nhận ra nó không sử dụng HTML & CSS thông thường như một ứng dụng web. Trong hướng dẫn này, ta sẽ thảo luận về sự khác biệt. Và một trong những điểm khác biệt chính mà bạn sẽ thấy là mọi thứ đều được tạo kiểu tự động dựa trên Flexbox .

Bây giờ, nếu muốn, bạn chỉ cần nhập thư viện styled-components và sử dụng CSS bình thường như vậy. Đó là một thư viện tuyệt vời và tôi muốn giới thiệu nó. Tuy nhiên, nếu bạn muốn làm quen với việc tạo kiểu trong ứng dụng Gốc, hãy xem cách thực hiện điều đó.

StyleSheet

Điều đầu tiên cần biết về kiểu dáng React Native là sử dụng thành phần StyleSheet . Nhập nó như thế này:

import { StyleSheet } from 'react-native';

Sau đó, bạn có thể sử dụng nó như sau:

const styles = StyleSheet.create({
  container: {
    height: 100
  }
})

Sau đó, thêm nó để tạo kiểu cho thành phần của bạn một cách thích hợp, như sau:

<View style={styles.container}></View>

Bạn có thể đi theo con đường nội tuyến, như sau và bạn sẽ kết thúc với điều tương tự:

<View style={{height: 100}}></View>

Điểm ảnh?

Trông khá giống với CSS, phải không? Nói chung, nó được đặt tên giống nhau, để phản ánh CSS, nhưng bạn có thể nhận thấy rằng ta không chỉ ra bất kỳ đơn vị nào cho height: 100 “100” height: 100 . Có thể bạn đã quen với việc viết “px”, “vm”, v.v. Và câu hỏi là, những đơn vị nào được sử dụng theo mặc định trong React Native?

Đó là một câu hỏi khá phức tạp, phải mất hơn một bài báo mới trả lời được. Đối với iOS, chúng là "điểm hợp lý" và Android sử dụng DIP. Có rất nhiều lý do đằng sau điều này, cũng như logic tại sao nó được chọn. Điểm ngắn gọn của nó là có nhiều kích thước màn hình khác nhau và độ phân giải khác nhau trên cùng một kích thước màn hình. Vì vậy, nếu ta sử dụng pixel bình thường, nó sẽ trông giống pixel trên một số điện thoại; nhưng ý tưởng đằng sau “điểm” là làm cho mọi thứ trông tương đối giống nhau trên màn hình có mật độ pixel, độ phân giải cao, giống như trên màn hình có độ phân giải thấp.

Điều tốt là, điều này sẽ xử lý hầu hết các phong cách cho bạn, từ iOS đến Android. Mặc dù nó không hoàn hảo, nhưng nó sẽ trông gần giống nhau từ nền tảng này sang nền tảng khác. Có một phép tính diễn ra đằng sau mức thấp để xác định chiều cao, chiều rộng, chiều rộng đường viền, v.v. của bạn sẽ trông như thế nào trên màn hình.

Bạn cũng có thể sử dụng 'tự động' hoặc tỷ lệ phần trăm, nhưng bạn đặt nó trong dấu ngoặc kép, như sau:

<View style={{ height: '100%' }}></View>

Quấn toàn bộ màn hình

Bây giờ, một điều cần biết về việc đặt <View> để lấp đầy toàn bộ màn hình, là một chiếc điện thoại như iPhoneX có một phần màn hình bị che. Thông thường, một phần của màn hình mà bạn đặt các phần tử của bạn vào, sẽ bị ẩn dưới phần bị che của màn hình. Đối với điều này, chỉ cần sử dụng thành phần React Native <SafeAreaView> để bao bọc phần còn lại của các thành phần của bạn và bạn có thể chắc chắn rằng mình sẽ nhìn thấy tất cả màn hình của bạn .

Một cách khác là tạo kiểu đơn giản với flex: 1 . Lưu ý , React Native sử dụng Flexbox theo mặc định nên bạn không cần phải lo lắng về việc áp dụng display: flex cho bất cứ thứ gì. Nhưng tại sao việc thêm flex: 1 lấp đầy chiều cao của màn hình?

Trong React Native, flexDirection mặc định là column , không giống như trong version web. Bạn có thể đặt flexDirection , nhưng nếu không, flex: 1 kéo dài trục chính, theo mặc định là cột. Và nếu bạn biết Flexbox, bạn sẽ biết rằng nếu không có phần tử nào khác, flex: 1 sẽ lấp đầy toàn bộ trục chính của containers mẹ.

Lề và đệm

Một trong những điều thú vị về tạo kiểu trong React Native là các kiểu được thêm vào lề và đệm. Cả hai đều có cách đặt trên cùng và dưới cùng trong một dòng, cũng như trái và phải trong một dòng. Cả hai đều sử dụng các từ, Horizontal và Vertical .

Ví dụ: để cho một phần tử có lề trên và dưới là 20, bạn có thể đặt như sau: <View style={{marginVertical: 20}}></View> . Bạn cũng có thể cung cấp cho nó phần đệm trên và dưới bằng paddingVertical: 20 . Cái kia giống như cái paddingHorizontal này paddingHorizontal và marginHorizontal .

Bây giờ những điều này thật tuyệt, nhưng bạn có thể nhận thấy rằng bạn không thể làm những gì bạn sẽ làm trên web, như thế này: margin: '20 0 20 0' . Điều đó sẽ không hoạt động trong React Native.

Ngoài ra còn có “Bắt đầu” và “Kết thúc”, bạn có thể gắn thẻ ở cuối lề và phần đệm. Khi nào bạn thấy “bắt đầu” và “kết thúc” trong các kiểu, bạn có thể biết chúng phụ thuộc vào flexDirection của containers - nếu hướng là row thì marginStart bằng marginLeft . Nếu flexDirection là row-reverse thì marginStart sẽ bằng marginRight . Ngoài ra, hãy nhớ rằng “bắt đầu” và “kết thúc” overrides marginLeft và marginRight , paddingLeft và paddingRight .

Bóng và Đường viền

Kiểu border bình thường trong CSS không có sẵn trong kiểu React Native. Bạn phải chia nó thành borderColor và borderWidth . Với hai điều đó được chỉ ra, bạn có đủ cho một đường viền. Ngoài ra, bạn có thể chọn bên nào nhận được màu / chiều rộng nào.

Ngoài ra còn có borderRadius , như bạn có thể đã quen, cung cấp bán kính cho mỗi góc. Bạn có thể chọn từng bán kính riêng lẻ với top-start , top-end , top-end bottom-start hoặc đầu bottom-end , như sau: borderTopStartRadius: 20 hoặc bạn có thể sử dụng từ top-left , top-right , v.v. dễ dàng hơn. Cuối cùng, bạn có thể sử dụng borderStyle để chọn từ các đường viền đứt nét, chấm chấm hoặc liền mạch.

Đối với bóng đổ trong React Native, bạn sẽ không sử dụng box-shadow mà bạn có thể quen thuộc. Thay vào đó, React Native có các kiểu chỉ hoạt động trong iOS.Sử dụng ba kiểu sau: shadowOffset: { height: 3, width: 3 }, shadowColor: '#0000', shadowOpacity: 0.5, shadowRadius: 5 } . Những bóng đổ này hoạt động khá tốt và nếu bạn đã quen với bóng hộp trên web, đây sẽ là một điều đáng mừng.

Tuy nhiên, trong Android, không có giải pháp tích hợp sẵn nào tuyệt vời với React Native. Bạn có thể đặt thuộc tính elevation , nhưng thuộc tính này không thể tùy chỉnh và sẽ không hoạt động tốt với các kiểu khác - chẳng hạn như màu đường viền và màu nền. Đối với Android, tôi sẽ đề xuất react-native-shadow .

Nền tảng cụ thể

Trong phần trước, ta đã thấy sự khác biệt lớn đầu tiên giữa các nền tảng: một nền có kiểu đổ bóng, nhưng nền khác thì không. Bây giờ, điều tốt là, trong ví dụ trên, Android sẽ đơn giản bỏ qua các kiểu mà nó không hỗ trợ. Nó sẽ không hoạt động, nhưng ít nhất bạn sẽ không nhận được bất kỳ lỗi nào. Điều đó đúng với hầu hết các kiểu mà bạn sẽ thấy không được nền tảng hỗ trợ - nó sẽ bị bỏ qua.

Tuy nhiên, bạn sẽ tìm thấy khá nhiều sự khác biệt về ngoại hình từ nền tảng này sang nền tảng khác, ngay cả với những kiểu dáng hoàn hảo, sạch sẽ. Nó chỉ đơn giản là nhất định xảy ra. Để tạo kiểu dáng giống nhau trên các nền tảng, hãy nhập thành phần Platform từ React Native. Sau khi được nhập, bạn có thể cài đặt kiểu của bạn để trở nên năng động, phụ thuộc vào nền tảng.

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

{/* ... */}
<View style={styles.container}></View>
{/* ... */}

const styles = StyleSheet.create({
  container: {
    height: Platform.OS === 'android' ? 100 : 20,
    backgroundColor: Platform.OS === 'ios' ? 'yellow' : 'blue',
    ...Platform.select({ ios: { width: 100 } })
  }
})

Lưu ý hai cách khác nhau ở đây để đặt kiểu dành riêng cho nền tảng. Một cách xuất hiện sau style prop, sử dụng toán tử bậc ba, height: Platform.OS === 'ios' ? 100, 20 . Điều này hoạt động tốt trong hầu hết các tình huống, nhưng nếu bạn thậm chí không muốn cài đặt một phong cách trong một nền tảng thì sao? Đó là nơi ...Platform.select() xuất hiện. Điều này cho phép bạn chỉ định một kiểu trên một nền tảng hoặc cả hai: ...Platform.select({ ios { width: 100 }, android: { width: 75 } }) .

Khác

Như vậy, việc tạo kiểu trở nên sâu sắc và phức tạp hơn nhiều so với những gì bài viết này có thể đề cập. Bạn sẽ nhận thấy trong React Native rằng các kiểu khác nhau giữa các thành phần, không giống như web, nơi về cơ bản mọi thành phần đều có thể sử dụng mọi kiểu. Nếu bạn nhìn vào tài liệu chính thức của React Native (đây là định dạng trong thành phần Văn bản), bạn sẽ thấy danh sách các thành phần và bên dưới mỗi thành phần là danh sách các kiểu bạn có thể sử dụng để thiết kế thành phần. Bạn sẽ thấy những thứ này hơi hạn chế so với web và một số, như thành phần Nút, thậm chí không có giá đỡ kiểu dáng.

Đôi khi, bạn có thể sử dụng các thành phần như <TouchableOpacity> và tất nhiên, <View> , có sẵn hầu hết các đạo cụ tạo kiểu.

Tags:

Các tin liên quan