Cung cấp một nơi chứa tại vị trí cần đợi để tải dữ liệu, Dễ triển khai và thú vị khi sử dụng, gói này có tính tùy chỉnh cao, Vui lòng xem tài liệu để tìm thông tin :).
Tôi đã thử chuyển gói này thành @sarmad1995/react-native-content-loader, nhưng có vẻ như mọi người đang sử dụng phiên bản này nhiều, vì vậy từ nay tôi sẽ duy trì phiên bản này, @sarmad1995/react-native-content-loader cũng có tất cả các tính năng.
Tính năng
- :gear: Có thể tùy chỉnh: Hãy tự do thay đổi màu sắc, tốc độ, kích thước, đoạn văn, tiêu đề và nhiều hơn nữa.
- ⚛️ Nhẹ nhàng: Nhẹ nhàng với mã code chỉ cần thiết.
- :tada: Typescript: Được đánh dấu đầy đủ
Bắt đầu
npm install react-native-easy-content-loader --save
yarn add react-native-easy-content-loader
Ví dụ
Ví dụ đơn giản
<ContentLoader active />
Với Avatar
<ContentLoader active avatar />
Với Trạng thái đang tải
<ContentLoader active avatar loading={this.state.loading}>
<Text>This would be rendered with loading is false</Text>
</ContentLoader>
Số đoạn văn
<ContentLoader active avatar pRows={4} />
Độ rộng khác nhau cho các dòng đoạn văn khác nhau
<ContentLoader active avatar pRows={4} pWidth={["100%", 200, "25%", 45]} />
Kiểu Facebook và Instagram
Các kiểu này cũng linh hoạt và có thể tùy chỉnh
| Trình tải Facebook | Trình tải Instagram |
|---|---|
|
 |
import { FacebookLoader, InstagramLoader } from 'react-native-easy-content-loader';
<FacebookLoader active />
<InstagramLoader active />
Kiểu Điểm đánh
<Bullets active listSize={10} />
Kiểu Mặc định
Nó có tính tùy chỉnh cao, vui lòng tham khảo phần tùy chọn.
import ContentLoader from "react-native-easy-content-loader";
<ContentLoader
avatar
pRows={5}
pHeight={[100, 30, 20]}
pWidth={[100, 70, 100]}
/>;
| Thêm chiều cao và chiều rộng tùy chỉnh | Tương tự với các trình tải khác |
|---|---|
 |
 |
Một số ví dụ khác,
<FacebookLoader pHeight={[20, 10]} />
<ContentLoader reverse avatar pRows={5} pHeight={[40, 30, 20]} />
<ContentLoader active listSize={10} />
| Trình tải Mặc định | Có màu sắc |
|---|---|
 |
 |
Sử dụng
import ContentLoader, {
FacebookLoader,
InstagramLoader,
Bullets
} from "react-native-easy-content-loader";
<ContentLoader active />
Tùy chọn
Những tùy chọn này phổ biến với mọi thành phần,
**primaryColor?: string, rgba/hex**
Mặc định là rgba(220, 220, 220, 1).
**secondaryColor? string, rgba/hex**
Mặc định là rgba(200, 200, 200, 1).
**animationDuration? number**
Mặc định là 500. Thời gian chuyển đổi hoạt hình từ màu chính sang màu phụ
**loading?: bool | null**
Mặc định là null, Nếu được cung cấp giá trị bool, khi false, nó sẽ trả về các thành phần con (Hoạt động như một thành phần bọc)
**active? bool**
Mặc định là false, true nếu bạn muốn thực hiện hoạt hình cho thành phần.
**title? bool**
Mặc định là true. Nếu bạn muốn hiển thị tiêu đề, Chỉ hoạt động với ContentLoader.
**titleStyles? object**
Thêm kiểu cho tiêu đề.
**listSize? number**
Mặc định là 1. Nếu bạn muốn hiển thị một danh sách các trình tải, Hoạt động với tất cả các trình tải.
**avatar? bool**
Mặc định là false. Nếu bạn muốn hiển thị hình đại diện.
**aShape? string 'circle' | 'square'**
Mặc định là circle. Hình dạng của hình đại diện, có thể là circle hoặc square.
**aSize? string 'default' 'small' 'large' | number**
Mặc định là default. Có thể là một số cụ thể.
**reverse? bool**
Mặc định là false. Nếu bạn muốn đảo ngược giao diện.
**containerStyles? object**
Nếu bạn muốn thêm kiểu cho container.
Tùy chọn cụ thể cho tiêu đề.
**tHeight? string | number**
Được sử dụng để thay đổi chiều cao của tiêu đề.
**tWidth? stirng | number**
Được sử dụng để thay đổi chiều rộng của tiêu đề.
**sTHeight? string | number**
Được sử dụng để thay đổi chiều cao của tiêu đề phụ Chỉ hoạt động với Facebook và Instagram.
**sTWidth? string | number**
Được sử dụng để thay đổi chiều rộng của tiêu đề phụ Chỉ hoạt động với Facebook và Instagram.
**titleStyles? object**
Thêm kiểu cho tiêu đề.
**secondaryTitleStyles? object**
Thêm kiểu cho tiêu đề phụ. Chỉ hoạt động với Facebook và Instagram.
Tùy chọn cụ thể cho đoạn văn.
**pHeight? string | number | array**
Chiều cao của dòng đoạn văn, có thể chỉ định cùng chiều cao với một giá trị duy nhất hoặc có thể sử dụng mảng cho các chiều cao khác nhau, ví dụ [‘100%’, 200, 300], bạn có thể sử dụng pHeight và pWidth để đạt được các hình dạng khác nhau.
**pWidth? string | number | array**
Chiều rộng của dòng đoạn văn, có thể chỉ định cùng chiều rộng với một giá trị duy nhất hoặc có thể sử dụng mảng cho các chiều rộng khác nhau, ví dụ [‘100%’, 200, 300]
**paragraphStyles? objecct**
Thêm kiểu cho đoạn văn.
Tùy chọn cụ thể cho Instagram.
**imageHeight? number**
Thay đổi chiều cao của hình ảnh
**imageStyles? number**
Thêm kiểu cho hình ảnh
Lịch sử phát hành
Xem CHANGE_LOG.md.
Đóng góp
Hãy thoải mái đóng góp, hiện tại vẫn đang trong phiên bản beta và tôi có kế hoạch bổ sung thêm tính năng trong tương lai 🙂
Chi tiết tải về:
Tác giả: sarmad1995
Nguồn: https://github.com/sarmad1995/react-native-easy-content-loader
Giấy phép: MIT license
