Tại sao chúng tôi sử dụng biểu định kiểu trong phản ứng gốc?

Từ React Native in Action của Nader Dabit

Bài viết này thảo luận về các kiểu tổ chức trong React Native bên trong các thành phần

---

Tiết kiệm 37% khi sử dụng React Native trong hành động. Chỉ cần nhập mã fccdabit vào ô mã giảm giá khi thanh toán tại manning. com

---

React Native đi kèm với nhiều thành phần tích hợp sẵn và cộng đồng đã xây dựng nhiều thành phần khác mà bạn có thể đưa vào dự án của mình. Mỗi thành phần hỗ trợ một bộ kiểu cụ thể. Những phong cách đó có thể được áp dụng cho các loại thành phần khác. Ví dụ: thành phần

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

8 hỗ trợ thuộc tính

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

9 (

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

9 đề cập đến độ dày của phông chữ). Ngược lại, thành phần

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

1 hỗ trợ thuộc tính

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

2 (

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

2 đề cập đến cách bố trí các thành phần trong một

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

1)

Một số yếu tố kiểu dáng giống nhau giữa các thành phần nhưng không hoàn toàn giống nhau. Ví dụ: thành phần

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

1 hỗ trợ thuộc tính

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

6, trong khi thành phần

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

8 hỗ trợ thuộc tính

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

8. Một số kiểu, như

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

9, chỉ áp dụng cho một nền tảng cụ thể

Học các phong cách khác nhau và cách vận dụng chúng cần có thời gian. Đây là lý do tại sao điều quan trọng là bắt đầu với các nguyên tắc cơ bản như cách áp dụng và sắp xếp các kiểu. Phần này tập trung vào việc giảng dạy các nguyên tắc cơ bản về kiểu dáng đó, nhằm cung cấp cho bạn nền tảng tốt để từ đó bạn có thể bắt đầu khám phá các kiểu dáng và xây dựng thành phần Thẻ hồ sơ mẫu của chúng tôi

Để có tài liệu tham khảo chắc chắn về cách làm cho ứng dụng dành cho thiết bị di động của bạn có thể sử dụng được, hãy xem Các vấn đề về khả năng sử dụng của Matt Lacey

Áp dụng phong cách trong các ứng dụng của bạn

Để cạnh tranh trên thị trường, các ứng dụng di động cần có phong cách. Bạn có thể phát triển một ứng dụng đầy đủ chức năng, nhưng nếu nó trông tệ hại và không hấp dẫn, mọi người sẽ không hứng thú. Bạn không cần xây dựng ứng dụng có giao diện hấp dẫn nhất thế giới, nhưng bạn phải cam kết tạo ra một sản phẩm bóng bẩy. Một ứng dụng bóng bẩy, sắc nét ảnh hưởng rất lớn đến nhận thức của mọi người về chất lượng của ứng dụng

Bạn có thể áp dụng kiểu cho các phần tử trong React Native theo một số cách. Hai tùy chọn phổ biến là sử dụng kiểu dáng nội tuyến (liệt kê 1) và kiểu dáng bằng cách sử dụng

  
 style={[{color: 'black'},{color: 'yellow'},{color: 'red'}]}
  

0 (liệt kê 2)

Liệt kê 1 Sử dụng kiểu nội tuyến

  
 import React, { Component } from 'react'
 import { Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                         ❶
         Some Text    ❷
       
     )
   }
 }
  

❶  Kiểu nội tuyến được áp dụng cho thành phần React Native.

❷  Nhiều kiểu nội tuyến được áp dụng cùng một lúc

Như bạn có thể thấy trong danh sách 2, có thể chỉ định nhiều kiểu cùng một lúc bằng cách cung cấp một đối tượng cho thuộc tính kiểu

Liệt kê 2 Các kiểu tham chiếu được xác định trong Biểu định kiểu

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

❶  Tham chiếu kiểu

  
 style={[{color: 'black'},{color: 'yellow'},{color: 'red'}]}
  

1 được xác định trong biểu định kiểu s

  
 style={[{color: 'black'},{color: 'yellow'},{color: 'red'}]}
  

2.

❷  Sử dụng một mảng để tham chiếu cả kiểu

  
 style={[{color: 'black'},{color: 'yellow'},{color: 'red'}]}
  

3 và

  
 style={[{color: 'black'},{color: 'yellow'},{color: 'red'}]}
  

4 từ biểu định kiểu

❸ Xác định kiểu bằng cách sử dụng

  
 style={[{color: 'black'},{color: 'yellow'},{color: 'red'}]}
  

5

Về mặt chức năng, không có sự khác biệt giữa việc sử dụng kiểu nội tuyến so với việc tham chiếu kiểu được xác định trong

  
 style={[{color: 'black'},{color: 'yellow'},{color: 'red'}]}
  

0. Với

  
 style={[{color: 'black'},{color: 'yellow'},{color: 'red'}]}
  

0, bạn tạo một đối tượng kiểu và tham chiếu đến từng kiểu riêng lẻ. Việc tách các kiểu khỏi phương thức

  
 style={[{color: 'black'},{color: 'yellow'},{color: 'red'}]}
  

8 giúp mã dễ hiểu hơn và thúc đẩy việc sử dụng lại các kiểu trên các thành phần

Khi sử dụng tên kiểu như

  
 style={[{color: 'black'},{color: 'yellow'},{color: 'red'}]}
  

4, bạn sẽ dễ dàng nhận ra ý định của thông điệp. Kiểu nội tuyến là

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

00 không cung cấp thông tin chi tiết về lý do tại sao thư có màu đỏ. Có các kiểu được chỉ định ở một nơi thay vì nội dòng trên nhiều thành phần giúp dễ dàng áp dụng các thay đổi trên toàn bộ ứng dụng. Hãy tưởng tượng rằng chúng tôi muốn thay đổi thông báo cảnh báo thành màu vàng. Tất cả những gì chúng ta cần làm là thay đổi định nghĩa kiểu một lần trong biểu định kiểu,

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

01

Liệt kê 2 cũng chỉ cho bạn cách chỉ định nhiều kiểu bằng cách cung cấp một mảng các thuộc tính kiểu. Hãy nhớ rằng khi thực hiện việc này, kiểu cuối cùng được chuyển sẽ ghi đè kiểu trước đó nếu có thuộc tính trùng lặp. Ví dụ: nếu một mảng các kiểu như…

________số 8

…được cung cấp, thì giá trị cuối cùng cho màu sẽ ghi đè tất cả các giá trị trước đó. Trong ví dụ này, màu đó là màu đỏ. Cũng có thể kết hợp hai phương pháp;

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

0

React Native linh hoạt về mặt này, có thể tốt và xấu. Việc chỉ định các kiểu nội tuyến khi bạn đang nhanh chóng thử tạo nguyên mẫu thứ gì đó là cực kỳ dễ dàng, nhưng về lâu dài, bạn sẽ muốn cẩn thận với cách tổ chức các kiểu của mình;

Bằng cách tổ chức các phong cách của bạn, bạn sẽ làm cho nó dễ dàng hơn

• duy trì cơ sở mã ứng dụng của bạn,
• tái sử dụng các kiểu trên các thành phần và
• thử nghiệm thay đổi kiểu dáng trong quá trình phát triển

phong cách tổ chức

Như bạn có thể nghi ngờ từ phần trước, sử dụng kiểu nội tuyến không phải là cách được khuyến nghị. bảng định kiểu là cách hiệu quả hơn nhiều để quản lý kiểu. Nhưng điều đó có nghĩa là gì trong thực tế?

Khi tạo kiểu trang web, chúng tôi luôn sử dụng biểu định kiểu. Chúng tôi thường sử dụng các công cụ như Sass, Less và PostCSS để tạo các biểu định kiểu nguyên khối cho toàn bộ ứng dụng của mình. Trong thế giới web, phong cách của chúng tôi mang tính toàn cầu, nhưng đó không phải là cách của React Native

React Native tập trung vào thành phần. Mục tiêu là làm cho các thành phần có thể tái sử dụng và độc lập nhất có thể. Có một thành phần phụ thuộc vào biểu định kiểu của ứng dụng là phản đề của tính mô đun. Trong React Native, các kiểu nằm trong phạm vi thành phần – không phải ứng dụng

Làm thế nào để hoàn thành việc đóng gói này hoàn toàn phụ thuộc vào sở thích của nhóm bạn. Không có cách nào đúng hay sai, nhưng trong cộng đồng React Native, bạn sẽ tìm thấy hai cách tiếp cận phổ biến

1. khai báo các biểu định kiểu trong cùng một tệp với thành phần
2. khai báo các biểu định kiểu trong một tệp riêng, bên ngoài thành phần

Khai báo các biểu định kiểu trong cùng một tệp với thành phần

Một cách phổ biến để khai báo các kiểu nằm trong thành phần sử dụng chúng. Lợi ích chính của việc này là thành phần và các kiểu của nó được gói gọn hoàn toàn trong một tệp duy nhất. Thành phần này sau đó có thể được di chuyển hoặc sử dụng ở bất kỳ đâu trong ứng dụng. Đây là một cách tiếp cận phổ biến đối với thiết kế thành phần, một cách mà bạn thường thấy trong cộng đồng React (Native)

Khi bao gồm các định nghĩa biểu định kiểu với thành phần, quy ước điển hình là chỉ định các kiểu sau thành phần

Khai báo các biểu định kiểu trong một tệp riêng

Nếu bạn đã quen viết CSS, việc đặt các kiểu của bạn vào một tệp riêng biệt có vẻ là một cách tiếp cận tốt hơn và cảm thấy quen thuộc hơn. Các định nghĩa biểu định kiểu được tạo trong một tệp riêng. Bạn có thể đặt tên cho nó bất cứ thứ gì bạn muốn (

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

02 là điển hình) nhưng hãy chắc chắn rằng phần mở rộng là “. js”; . Tệp biểu định kiểu và tệp thành phần được lưu trong cùng một thư mục

---

Hình 1 Một cấu trúc tệp ví dụ với các kiểu được tách biệt khỏi các thành phần thành một thư mục thay vì một tệp duy nhất

---

Cấu trúc tệp như hình 1 giữ lại mối quan hệ chặt chẽ giữa các thành phần và kiểu dáng, đồng thời mang lại một chút rõ ràng bằng cách không trộn lẫn các định nghĩa kiểu dáng với các khía cạnh chức năng của các thành phần. Liệt kê 3 tương ứng với một phong cách. js được sử dụng để tạo kiểu cho một thành phần như

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

03 và

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

04 ở trên

Liệt kê 3 Bên ngoài hóa biểu định kiểu của thành phần (kiểu. js)

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

7

❶  Tạo biểu định kiểu và lưu biểu định kiểu đó vào hằng số

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

05. Cố gắng đặt tên hằng có ý nghĩa. Trong trường hợp này,

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

05 đại diện cho các kiểu chung được sử dụng bởi thành phần. Hằng số tiếp theo có tên là

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

07, vì nó xác định các kiểu được sử dụng bởi các nút trong thành phần.

❷  Xác định kiểu cho

  
 style={[{color: 'black'},{color: 'yellow'},{color: 'red'}]}
  

1. Nó có thể được thành phần tham chiếu là

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

09.

❸  Tạo biểu định kiểu thứ hai và lưu biểu định kiểu đó vào hằng số

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

07.

❹   Xác định kiểu cho nút chính. Nó có thể được thành phần tham chiếu là

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

71.

❺  Xuất cả biểu định kiểu

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

05 và

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

07, để đảm bảo rằng thành phần có quyền truy cập vào các hằng số.

Thành phần nhập các biểu định kiểu bên ngoài và có thể tham chiếu bất kỳ kiểu nào được xác định trong đó

Liệt kê 4 Nhập biểu định kiểu bên ngoài

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

7

❶  Nhập nhiều biểu định kiểu được xuất từ ​​

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

02

❷  Tham chiếu đến kiểu

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

09 được tạo trong

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

02

❸   Tham chiếu đến kiểu

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

71 được tạo trong

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

02

Phong cách là mã

Bạn đã thấy cách JavaScript được sử dụng để xác định kiểu trong React Native. Mặc dù có một ngôn ngữ kịch bản đầy đủ với các biến và hàm, phong cách của chúng tôi khá tĩnh, nhưng chắc chắn chúng không nhất thiết phải như vậy.

Các nhà phát triển web đã chiến đấu với CSS trong nhiều năm. Các công nghệ hoàn toàn mới như Sass, Less và PostCSS đã được tạo ra để khắc phục nhiều hạn chế của biểu định kiểu xếp tầng. Ngay cả những thứ như xác định một biến để lưu trữ màu chính của trang web cũng không thể thực hiện được nếu không có bộ tiền xử lý CSS. Đề xuất thuộc tính tùy chỉnh CSS cho mô-đun biến xếp tầng cấp 1 vào tháng 12 năm 2015 đã giới thiệu khái niệm thuộc tính tùy chỉnh, tương tự như biến, nhưng khi tôi viết bài này, chưa đến 80% trình duyệt đang sử dụng hỗ trợ chức năng này

Hãy tận dụng thực tế là chúng ta đang sử dụng JavaScript và bắt đầu coi phong cách của chúng ta là mã. Hãy xây dựng một ứng dụng cung cấp cho người dùng một nút để thay đổi chủ đề từ sáng sang tối. Nhưng trước khi chúng tôi bắt đầu viết mã, hãy xem qua những gì chúng tôi đang cố gắng xây dựng

Ứng dụng này có một nút duy nhất trên màn hình. Nút đó được bao quanh bởi một hộp vuông nhỏ. Khi nhấn nút, các chủ đề sẽ chuyển đổi. Khi chủ đề ánh sáng được chọn, nhãn nút có màu TRẮNG, nền có màu trắng và hộp xung quanh nút có màu đen. Khi chủ đề tối được chọn, nhãn nút có màu ĐEN, nền màu đen và hộp xung quanh nút có màu trắng

Nhìn vào Hình 2 để xem màn hình sẽ trông như thế nào khi các chủ đề được chọn

---

Hình 2  Một ứng dụng đơn giản hỗ trợ hai chủ đề, trắng và đen. Người dùng có thể nhấp vào nút để chuyển đổi giữa nền trắng và nền đen

---

Đối với ví dụ này, hãy sắp xếp các kiểu của chúng ta thành một tệp riêng, kiểu. js. Sau đó, hãy tạo một số hằng số để giữ các giá trị màu của chúng ta và tạo hai biểu định kiểu cho chủ đề sáng và tối

Liệt kê 5 Biểu định kiểu động được trích xuất từ ​​tệp thành phần chính (các kiểu. js)

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

3

❶  Hằng xác định màu tương ứng với chủ đề sáng và tối của chúng tôi. Nếu chúng tôi muốn thay đổi màu chủ đề của mình, chúng tôi chỉ cần thay đổi chúng tại một điểm.

❷   Một đối tượng JavaScript đơn giản để chứa các kiểu vùng chứa cơ sở của chúng tôi

❸   Một đối tượng JavaScript đơn giản để chứa các kiểu hộp cơ sở của chúng tôi

❹  Tạo biểu định kiểu cho chủ đề sáng

❺  Tạo biểu định kiểu cho chủ đề tối

❻  Hàm trả về chủ đề phù hợp dựa trên giá trị Boolean

❼  Trả lại chủ đề tối nếu

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

79 là đúng, nếu không thì trả lại chủ đề sáng.

Khi các kiểu được định cấu hình, chúng ta có thể bắt đầu xây dựng Ứng dụng thành phần của mình. Bởi vì chúng tôi chỉ có chủ đề sáng và tối, chúng tôi đã tạo một hàm tiện ích,

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

70, nhận giá trị Boolean. Nếu cung cấp

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

71, chủ đề tối sẽ được trả lại, nếu không, chủ đề sáng sẽ được trả lại

Liệt kê 6 Một ứng dụng chuyển đổi giữa chủ đề sáng và tối (Ứng dụng. js)

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

7

❶  Nhập hàm

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

70 từ các kiểu bên ngoài của chúng tôi

❷  Khởi tạo trạng thái của thành phần để hiển thị chủ đề ánh sáng theo mặc định.

❸  Liên kết hàm

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

73 với thành phần. Không ràng buộc chức năng với thành phần,

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

74 không được xác định và bạn sẽ gặp ngoại lệ khi cố chạy mã.

❹  Chuyển giá trị chủ đề sang trạng thái bất cứ khi nào hàm được gọi.

❺  Sử dụng hàm

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

70 đã nhập của chúng tôi để nhận biểu định kiểu phù hợp cho bất kỳ chủ đề nào sẽ được hiển thị.

❻  React Native cung cấp hàm tiện ích

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

76 để chuyển đổi đối tượng

  
 style={[{color: 'black'},{color: 'yellow'},{color: 'red'}]}
  

0 thành một đối tượng JavaScript đơn giản. Thực hiện chuyển đổi này giúp việc sử dụng

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

78 dễ dàng hơn nhiều.

❼  Tham khảo phong cách

  
 style={[{color: 'black'},{color: 'yellow'},{color: 'red'}]}
  

1 của chủ đề của chúng tôi

❽   Tham khảo phong cách

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

30 của chủ đề của chúng tôi (đường viền hộp xung quanh nút)

❾   Một chuỗi đại diện cho màu đang được chủ đề sử dụng

❿   Khi nhấn nút, hãy gọi hàm

  
 import React, { Component } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
  
 export default class App extends Component {
   render () {
     return (
                                          ❶
         Some Text  ❷
          
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {                                                          ❸
     marginLeft: 20,
     marginTop: 20
   },
   message: {                                                            ❸
     fontSize: 18
   },
   warning: {
     color: 'red'                                                        ❸
   }
 });
  

73 để luân phiên từ chủ đề này sang chủ đề khác.

Bây giờ bạn đã có một ứng dụng chuyển đổi chủ đề, hãy thoải mái thử nghiệm và tiến xa hơn một chút. Hãy thử thay đổi chủ đề ánh sáng thành một màu khác. Bạn sẽ nhận thấy nó dễ dàng như thế nào vì các màu được xác định là hằng số ở một nơi. Hãy thử thay đổi nhãn nút trong giao diện tối thành cùng màu với nền thay vì luôn có màu trắng. Hãy thử tạo một chủ đề hoàn toàn mới hoặc sửa đổi mã để hỗ trợ nhiều chủ đề khác nhau thay vì chỉ có hai chủ đề – chúc vui vẻ

---

Nếu bạn muốn tìm hiểu thêm về cuốn sách, hãy xem nó trên liveBook tại đây và xem bản trình chiếu này

Tại sao StyleSheet được sử dụng trong React Native?

Mục đích của API StyleSheet là gì?

Cách các kiểu hoạt động trong React Native?