Cách chuyển đạo cụ cho StyleSheet trong React gốc

Chúng tôi sử dụng các kiểu để làm cho ứng dụng của bạn trông tuyệt vời. Các kiểu cho phép chúng tôi định cấu hình các thuộc tính trực quan của các thành phần của chúng tôi, như màu nền, cũng như bố cục của chúng, tôi. e. vị trí và kích thước của chúng trên màn hình

React Các kiểu gốc dựa trên CSS. hầu hết các tên và giá trị thuộc tính kiểu đều giống nhau giữa React cho web và React Native. Điều này rất tiện lợi vì chúng ta sẽ có thể sử dụng lại rất nhiều kiến ​​thức hiện có của mình từ việc xây dựng các ứng dụng web

Tuy nhiên, có một số khác biệt quan trọng giữa phong cách CSS và React Native. Sự khác biệt lớn nhất là không có tệp CSS. Không có ngôn ngữ hoặc cú pháp đặc biệt nào để học;

Có hai cách phổ biến để xác định kiểu thành phần

Chúng ta sẽ bắt đầu bằng cách khám phá cả hai cách tiếp cận này

Hầu hết các thành phần React Native tích hợp (Chế độ xem, Văn bản, Hình ảnh, v.v.) đều chấp nhận một đối tượng style làm chỗ dựa. Tạo kiểu theo cách này tương tự như React dành cho web. khóa là tên và giá trị thuộc tính CSS có vỏ lạc đà thường là giá trị CSS. Ví dụ: chúng ta có thể định cấu hình màu nền của Chế độ xem bằng cách chuyển { backgroundColor: "#0088FF" } làm giá đỡ kiểu

Trong ví dụ sau, chúng tôi đặt Màu nền, chiều rộng và chiều cao của Chế độ xem bằng đối tượng kiểu nội tuyến

Tải xuống ví dụ

Bất kỳ đoạn ví dụ nào cũng có thể được tải xuống dưới dạng dự án React Native đầy đủ trên máy tính của bạn. Chúng tôi sẽ bao gồm liên kết "Tải xuống ví dụ" bên dưới mỗi đoạn mã từ đây trở đi. Sau khi giải nén tệp, hãy chạy npm install và expo start để chạy dự án cục bộ. Điều này là hoàn toàn tùy chọn

Các kiểu nội tuyến rất hữu ích cho việc tạo mẫu, vì chúng nằm cùng vị trí với mã hiển thị của chúng tôi. Chúng ta cũng cần sử dụng kiểu nội tuyến khi xác định kiểu động, e. g. style dựa trên props, vì chúng ta không biết giá trị của props cho đến khi hàm render được gọi

Tuy nhiên, các kiểu nội tuyến có thể nhanh chóng phát triển từ một vài dòng thành khá nhiều mã, điều này làm lộn xộn phương thức kết xuất của chúng ta, khiến mã của chúng ta khó theo dõi hơn. Sẽ không thuận tiện nếu chúng ta có thể chuyển chúng đi nơi khác?

API StyleSheet cung cấp cho chúng tôi một cách nhất quán để xác định kiểu của chúng tôi bên ngoài định nghĩa thành phần của chúng tôi. Ngoài ra, StyleSheet bao gồm các tối ưu hóa hiệu suất quan trọng không thể thực hiện được với các kiểu nội tuyến. Vì những lý do này, chúng ta thường nên sử dụng API StyleSheet bất cứ khi nào có thể, thay vì các kiểu nội tuyến

Đây là ví dụ tương tự như trên sử dụng StyleSheets

Tải xuống ví dụ

Chúng tôi gọi

//React Native Stylesheet – Styling in React Native
//https://aboutreact.com/react-native-stylesheet/

//import React in our code
import React from 'react';

//import all the components we are going to use
import { StyleSheet, View, Text, SafeAreaView } from 'react-native';

const App = () => {
  return (
    
      Hello!
      I am a Text in side View
      
          Who you are ?
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 25,
    alignItems: 'center',
    fontWeight: 'bold',
    color: 'red',
  },
});

export default App;

0 với một đối tượng cấp cao nhất chứa các đối tượng kiểu lồng nhau. StyleSheet sau đó sẽ tối ưu hóa phong cách của chúng tôi và trả lại cho chúng tôi. Các khóa của đối tượng cấp cao nhất là tùy ý, nhưng sẽ xác định tên của các kiểu được tối ưu hóa của chúng tôi. Sau đó, chúng ta có thể gọi chúng theo tên trong phương thức kết xuất của chúng ta, e. g. phong cách. phong cách của tôi

Biểu định kiểu gốc React tương tự như biểu định kiểu CSS chứa tên lớp - chúng tôi xác định chúng riêng biệt với mã thành phần của chúng tôi và có thể sử dụng lại cùng một định nghĩa ở bất cứ đâu chúng tôi muốn kiểu đó

Đôi khi chúng ta có thể muốn áp dụng nhiều kiểu cho một thành phần cùng một lúc (tương tự như "xếp tầng" trong các kiểu CSS) và may mắn thay, React Native cung cấp một cách dễ dàng để thực hiện điều đó

Giả sử chúng ta muốn kết xuất hai thành phần

//React Native Stylesheet – Styling in React Native
//https://aboutreact.com/react-native-stylesheet/

//import React in our code
import React from 'react';

//import all the components we are going to use
import { StyleSheet, View, Text, SafeAreaView } from 'react-native';

const App = () => {
  return (
    
      Hello!
      I am a Text in side View
      
          Who you are ?
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 25,
    alignItems: 'center',
    fontWeight: 'bold',
    color: 'red',
  },
});

export default App;

2. Một người nên sử dụng kiểu văn bản "chuẩn", trong khi người kia nên mở rộng kiểu văn bản "chuẩn" của chúng tôi bằng một kiểu "ưa thích" bổ sung

Trên trang web, chúng tôi có thể chuyển hai tên lớp cho thành phần văn bản "ưa thích" của chúng tôi. một cho phong cách tiêu chuẩn và một cho phong cách ưa thích. React Native cho phép chúng ta chuyển một mảng các kiểu cho một thành phần để thực hiện điều tương tự. Khi chúng ta chuyển một mảng các kiểu làm chỗ dựa kiểu, các khóa của chúng được hợp nhất thành một đối tượng duy nhất, với đối tượng cuối cùng trong mảng được ưu tiên

Đây là ví dụ của chúng tôi với hai thành phần

//React Native Stylesheet – Styling in React Native
//https://aboutreact.com/react-native-stylesheet/

//import React in our code
import React from 'react';

//import all the components we are going to use
import { StyleSheet, View, Text, SafeAreaView } from 'react-native';

const App = () => {
  return (
    
      Hello!
      I am a Text in side View
      
          Who you are ?
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 25,
    alignItems: 'center',
    fontWeight: 'bold',
    color: 'red',
  },
});

export default App;

2

Tải xuống ví dụ

Ở đây chúng ta có thể thấy rằng văn bản ưa thích sử dụng kích thước của văn bản "tiêu chuẩn", nhưng thêm hai thuộc tính kiểu bổ sung. Lưu ý rằng màu của kiểu "ưa thích" sẽ ghi đè màu của kiểu "tiêu chuẩn", vì chúng ta chuyển nó cuối cùng trong mảng. Cũng lưu ý rằng chúng ta có thể trộn và kết hợp các đối tượng kiểu nội tuyến và kiểu Biểu định kiểu trong mảng này

Cách tiếp cận này giúp chúng tôi quản lý độ phức tạp của các thành phần phức tạp bằng cách sử dụng lại các phần kiểu của chúng tôi ở nhiều nơi

Trong bài đăng này, bạn sẽ thấy Kiểu dáng của Thành phần gốc React bằng cách sử dụng Biểu định kiểu. StyleSheet tương tự như CSS StyleSheets được sử dụng trong phát triển web. React Native cung cấp một số thành phần cơ bản có thể sử dụng trực tiếp nhưng theo chủ đề của ứng dụng, đôi khi chúng ta phải tùy chỉnh các thành phần và đó là lý do tại sao chúng ta sử dụng StyleSheet

Tương tự như CSS, chúng ta có thể sử dụng StyleSheet theo cả hai cách. Bằng cách tạo một StyleSeet riêng biệt hoặc nội tuyến

Biểu định kiểu riêng biệt

Bạn có thể dễ dàng tạo StyleSheet của mình như hình bên dưới. Bạn có thể sử dụng 

//React Native Stylesheet – Styling in React Native
//https://aboutreact.com/react-native-stylesheet/

//import React in our code
import React from 'react';

//import all the components we are going to use
import { StyleSheet, View, Text, SafeAreaView } from 'react-native';

const App = () => {
  return (
    
      Hello!
      I am a Text in side View
      
          Who you are ?
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 25,
    alignItems: 'center',
    fontWeight: 'bold',
    color: 'red',
  },
});

export default App;

4 để truy cập Biểu định kiểu cho bất kỳ phần tử nào

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 25,
    fontWeight: 'bold',
  }
}); 

Đây là StyleSheet. tạo sẽ tạo một biểu định kiểu và gán nó cho biến kiểu. Bạn có thể thấy cấu trúc để xác định kiểu giống như tạo JSON

Mã số

Sau khi tạo StyleSheet, chúng ta có thể sử dụng nó như ví dụ bên dưới

Ứng dụng. js

//React Native Stylesheet – Styling in React Native
//https://aboutreact.com/react-native-stylesheet/

//import React in our code
import React from 'react';

//import all the components we are going to use
import { StyleSheet, View, Text, SafeAreaView } from 'react-native';

const App = () => {
  return (
    
      Hello!
      I am a Text in side View
      
          Who you are ?
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 25,
    alignItems: 'center',
    fontWeight: 'bold',
    color: 'red',
  },
});

export default App;

Tải xuống mã nguồn

Ảnh chụp màn hình đầu ra

Các tên và giá trị kiểu thường khớp với cách CSS hoạt động trên web, ngoại trừ các tên được viết bằng cách sử dụng cách viết hoa lạc đà, v.v. g backgroundColor chứ không phải màu nền

Kiểu nội tuyến

Chúng tôi cũng có thể tùy chỉnh các thành phần nội tuyến. Ví dụ

Ở đây, chúng tôi có một hình ảnh cần xác định

//React Native Stylesheet – Styling in React Native
//https://aboutreact.com/react-native-stylesheet/

//import React in our code
import React from 'react';

//import all the components we are going to use
import { StyleSheet, View, Text, SafeAreaView } from 'react-native';

const App = () => {
  return (
    
      Hello!
      I am a Text in side View
      
          Who you are ?
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 25,
    alignItems: 'center',
    fontWeight: 'bold',
    color: 'red',
  },
});

export default App;

5 , 

//React Native Stylesheet – Styling in React Native
//https://aboutreact.com/react-native-stylesheet/

//import React in our code
import React from 'react';

//import all the components we are going to use
import { StyleSheet, View, Text, SafeAreaView } from 'react-native';

const App = () => {
  return (
    
      Hello!
      I am a Text in side View
      
          Who you are ?
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 25,
    alignItems: 'center',
    fontWeight: 'bold',
    color: 'red',
  },
});

export default App;

6và điều đó cũng có thể được thực hiện bằng cách thêm Kiểu nội tuyến

Để biết thêm về React Native UI Kits, bạn có thể truy cập bài đăng Thư viện UI tốt nhất cho React Native

Đầu ra trong Trình mô phỏng trực tuyến

Đó là React Native StyleSheet. Nếu bạn có bất kỳ nghi ngờ nào hoặc bạn muốn chia sẻ điều gì đó về chủ đề này, bạn có thể bình luận bên dưới hoặc liên hệ với chúng tôi tại đây. Các thành phần còn lại sẽ được đề cập trong bài viết tiếp theo. Giữ nguyên

Phương pháp nào được sử dụng để tạo StyleSheet trong React Native?

Chúng tôi có thể sử dụng đạo cụ trong React Native không?