Cách sử dụng Thư viện thành phần React Native Elements trong Ứng dụng dành cho thiết bị di động của bạn
Thư viện thành phần là một tập hợp các mã có thể tùy chỉnh và sử dụng lại có thể được tạo cho phù hợp với mẫu thiết kế của một ứng dụng cụ thể. Chúng giúp duy trì thiết kế nhất quán trên các nền tảng và tăng tốc quá trình phát triển.
Tại đây, bạn sẽ học cách sử dụng thư viện thành phần React Native Elements khi xây dựng ứng dụng React Native tiếp theo của mình.
Mục Lục
React Native Elements là gì?
React Native Elements (RNE) là một nỗ lực mã nguồn mở của các nhà phát triển React Native nhằm tạo ra một thư viện thành phần có thể hữu ích khi xây dựng các ứng dụng Android, iOS và web. Không giống như nhiều thư viện thành phần React Native khác, RNE hỗ trợ cú pháp TypeScript.
Thư viện bao gồm hơn 30 thành phần tập trung vào cấu trúc thành phần.
Cài đặt các phần tử gốc phản ứng với CLI React Native
Hướng dẫn sau đây là cài đặt React Native Elements trong một dự án được tạo bằng cách sử dụng React Native cli.
Cài đặt React Native Elements trong ứng dụng React Native đơn giản của bạn bằng cách chạy:
npm install @rneui/themed @rneui/base
Bạn cũng nên cài đặt react-native-vector-icon và safe-area-context:
npm install react-native-vector-icons react-native-safe-area-context
Cách cài đặt React Native Elements trong một dự án Expo
Để cài đặt React Native Elements trong một dự án Expo hiện có, hãy cài đặt gói và react-native-safe-area-context:
yarn add @rneui/themed @rneui/base react-native-safe-area-context
Duy trì một trình quản lý gói như npm hoặc sợi trong khi cài đặt các gói để tránh nguy cơ xung đột phụ thuộc.
Các dự án được xây dựng bằng cli hội chợ có cài đặt react-native-vector-icon theo mặc định, vì vậy bạn không cần cài đặt nó.
Tạo kiểu cho các thành phần phần tử gốc phản ứng đơn
Tất cả các thành phần có sẵn thông qua RNE sử dụng các đạo cụ khác nhau để tạo kiểu cho thành phần và vùng chứa của thành phần.
Vùng chứa của thành phần là một cơ bản
Một thành phần có thể nhận được các đạo cụ tạo kiểu mặc định như màu sắc, loại hìnhvà kích thước. Một thành phần cũng có thể nhận được một giá đỡ kiểu tùy chỉnh duy nhất để xử lý các kiểu của thành phần.
Đây là tất cả các kiểu bên ngoài cho thành phần.
Ví dụ: tạo kiểu cho Cái nút thành phần:
import { View } from "react-native";
import { Button } from "@rneui/themed";const MyComponent = () => {
return (
<View>
<Button
buttonStyle={{ backgroundColor: "grey" }}
containerStyle={{ width: 150 }}
>
Solid Button
</Button>
<Button
type="outline"
containerStyle={{ width: 150, margin: 10 }}
title="Outline Button"
/>
</View>
);
}
Đoạn mã trên cho thấy cách bạn có thể áp dụng kiểu cho một thành phần Nút. Một nút sử dụng mặc định loại hình cái chống đỡ và cái kia sử dụng tùy chỉnh buttonStyle chỗ dựa. Cả hai nút cũng sử dụng containerStyle hỗ trợ để thêm các kiểu xem.
Tạo chủ đề cho các thành phần React Native Elements
Tạo chủ đề cho các thành phần RNE rất hữu ích khi bạn muốn áp dụng một kiểu cho mọi trường hợp của các thành phần đó. Với các chủ đề, việc tùy chỉnh các thành phần của bạn cho phù hợp với mẫu thiết kế mong muốn trở thành một nhiệm vụ dễ dàng.
RNE cung cấp một createTheme () chức năng để tạo kiểu cho các thành phần. Chức năng này sẽ giữ các kiểu chủ đề ghi đè các kiểu nội bộ hoặc mặc định của mọi thành phần.
Để tạo một chủ đề, hãy gọi createTheme () và chuyển các kiểu chủ đề mong muốn dưới dạng đối số hàm:
import { ThemeProvider, createTheme } from '@rneui/themed';const theme = createTheme({
components: {
Button: {
containerStyle: {
margin: 10,
},
titleStyle: {
color: "black",
},
},
},
});
Các ThemeProvider sẽ áp dụng các kiểu cho bất kỳ thành phần nào được bao bọc bên trong nó.
Nhà cung cấp chấp nhận một chủ đề prop được đặt thành chủ đề đã tạo ở trên:
<ThemeProvider theme={theme}>
<Button title="Themed Button" />
</ThemeProvider>
<Button title="Normal Button" />
Kiểu chủ đề ghi đè kiểu thành phần bên trong hoặc mặc định nhưng sẽ không ghi đè kiểu thành phần bên ngoài.
Thứ tự ưu tiên của RNE đặt các kiểu bên ngoài ở đầu cấu trúc phân cấp.
Thí dụ:
const theme = createTheme({
components: {
Button: {
containerStyle: {
margin: 10,
backgroundColor: "red",
},
},
},
});
<ThemeProvider theme={theme}>
<Button title="Themed Button" color={"secondary"}/>
</ThemeProvider>
Trong đoạn mã trên, màu nền của Cái nút thành phần sẽ là thứ yếu, là màu xanh lục đối lập với phong cách chủ đề là màu đỏ.
Một chủ đề đối tượng được vận chuyển với RNE, cung cấp nhiều giá trị màu mặc định ra khỏi hộp. RNE cung cấp các tùy chọn khác nhau như ThemeConsumer thành phần, useTheme () móc, và makeStyles () máy phát hook để truy cập chủ đề sự vật.
Các ThemeConsumer component sẽ bao bọc các thành phần của bạn được hiển thị bằng một hàm ẩn danh. Chức năng ẩn danh này có chủ đề như một chỗ dựa.
Bạn có thể truy cập các giá trị chủ đề bằng Phong cách chống đỡ:
import React from 'react';
import { Button } from 'react-native';
import { ThemeConsumer } from '@rneui/themed';const MyComponent = () => (
<ThemeConsumer>
{({ theme }) => (
<Button title="ThemeConsumer" style={{ color: theme.colors.primary }} />
)}
</ThemeConsumer>
)
Ngoài ra, bạn có thể sử dụng useTheme () hook để truy cập chủ đề bên trong một thành phần.
Ví dụ:
import React from 'react';
import { Button } from 'react-native';
import { useTheme } from '@rneui/themed';const MyComponent = () => {
const { theme } = useTheme();
return (
<View style={styles.container}>
<Button title="useTheme" style={{ color: theme.colors.primary }}/>
</View>
);
};
Các makeStyles () trình tạo hook tương tự như việc sử dụng bảng định kiểu để xác định kiểu. Giống như biểu định kiểu, nó phân tách mọi kiểu dáng ra khỏi thành phần được hiển thị của bạn. Tham khảo chủ đề đối tượng bên trong một chỗ dựa phong cách thành phần.
Mở rộng chủ đề với TypeScript
RNE hỗ trợ khai báo TypeScript trong ứng dụng của bạn, cho phép các nhà phát triển tận dụng những lợi ích của việc sử dụng ngôn ngữ TypeScript.
Với TypeScripts tuyên bố hợp nhấtbạn có thể mở rộng định nghĩa chủ đề để thêm màu sắc và đạo cụ tùy chỉnh cho cả thành phần mặc định và tùy chỉnh của RNE.
Để mở rộng màu sắc bên trong đối tượng chủ đề, bạn sẽ tạo một TypeScript.ts tập tin và khai báo mô-đun @ rneui / theo chủ đề bên trong tệp.
Sau đó, bạn có thể tiếp tục thêm các màu tùy chỉnh của mình và chỉ định loại mong đợi của chúng:
import '@rneui/themed';
declare module '@rneui/themed' {
export interface Colors {
primaryLight: string;
secondaryLight: string;
}
}
Với mô-đun này, bạn có thể chuyển các màu tùy chỉnh của mình làm giá trị khi tạo chủ đề:
const theme = createTheme({
colors: {
primaryLight: "",
secondaryLight: ""
},
})
Giờ đây, các màu tùy chỉnh là một phần của đối tượng chủ đề của bạn và có thể được truy cập bằng cách sử dụng ThemeProvider, ThemeConsumer, hoặc là useTheme () cái móc.
Thành phần RNE so với Thành phần React Native
Các thư viện thành phần như React Native Elements là một cách tuyệt vời để thiết lập và chạy ứng dụng nhanh chóng. Họ khiến bạn tập trung vào cấu trúc của ứng dụng hơn là vào các chi tiết của thiết kế. Việc sử dụng các thành phần RNE trên các thành phần React Native nên được hướng dẫn chủ yếu bởi trọng tâm của ứng dụng của bạn và thời gian phát triển bạn có.