Áp dụng bóng hộp trong React Native

Áp dụng bóng hộp trong ứng dụng React Native không phải lúc nào cũng đơn giản. Vì các nhà phát triển phải xây dựng cho cả nền tảng Android và iOS, nên việc áp dụng các bóng hộp nhất quán với các quy trình triển khai dành riêng cho nền tảng khác nhau có thể rất tẻ nhạt.

Table of Contents

Trong bài viết này, chúng ta sẽ tìm hiểu cách triển khai bóng hộp trong ứng dụng React Native trên nền tảng Android và iOS.

Sử dụng đạo cụ tạo bóng React Native cho bóng hộp iOS

Để tạo các hộp đổ bóng cho thiết bị iOS, chúng ta có thể sử dụng bốn đạo cụ đổ bóng của React Native.

Đầu tiên là shadowColor, xác định màu của bóng hộp. Lưu ý rằng đây là công cụ hỗ trợ duy nhất hoạt động cho các thiết bị Android.

Chỗ dựa thứ hai, shadowOffset, chấp nhận các đối tượng chứa thuộc tính chiều rộng và chiều cao với một giá trị số:

{ width: quantity; peak: quantity}

Bởi vì nó được mô tả bằng hiệu số X và Y so với phần tử mà bóng hộp được áp dụng, width thuộc tính xác định độ lệch X của bóng trong khi peak thuộc tính xác định phần bù Y.

Cả đạo cụ chiều rộng và chiều cao đều có thể chấp nhận giá trị âm và dương.

Chỗ dựa thứ ba là shadowOpacity, thiết lập độ trong suốt của bóng hộp. Giá trị của prop nằm trong khoảng từ 0 đến 1, với 0 đại diện cho sự minh bạch hoàn toàn và 1 đại diện cho độ mờ hoàn toàn.

Chỗ dựa thứ tư là shadowRadius, chấp nhận một số làm giá trị của nó để đặt bán kính mờ của thành phần. Giá trị càng lớn, độ mờ càng lớn, đánh dấu bóng lớn hơn và nhẹ hơn. Chỗ dựa này không chấp nhận các giá trị âm.

Hãy sử dụng các đạo cụ này bằng cách áp dụng bóng hộp cho một thành phần thẻ với những điều sau:

// wherever your return assertion is <View model={[styles.card, styles.shadowProp]}> <View> <Textual content model={kinds.heading}> React Native Field Shadow (Shadow Props) </Textual content> </View> <Textual content> Utilizing the elevation model prop to use box-shadow for iOS units </Textual content> </View>

Tiếp theo, nhập StyleSheet để áp dụng nhiều kiểu cho thành phần thẻ:

// keep in mind to import StyleSheet from react-native const kinds = StyleSheet.create({ heading: { fontSize: 18, fontWeight: ‘600’, marginBottom: 13, }, card: { backgroundColor: ‘white’, borderRadius: 8, paddingVertical: 45, paddingHorizontal: 25, width: ‘100%’, marginVertical: 10, }, shadowProp: { shadowColor: ‘#171717’, shadowOffset: {width: -2, peak: 4}, shadowOpacity: 0.2, shadowRadius: 3, }, });

Với mã được thêm vào, ứng dụng sẽ hiển thị một thẻ có bóng hộp.

Thêm kinds.elevation hỗ trợ cho Android

Để thêm bóng hộp trong Android, chúng ta có thể sử dụng bộ nâng độ cao, sử dụng API độ cao của Android.

Để tìm hiểu cách sử dụng bóng hộp với phương pháp này, hãy áp dụng bóng hộp cho một thành phần thẻ. Lưu ý rằng kinds.elevation prop chỉ hoạt động khi nó được áp dụng cho một <View> thành phần:

// wherever your return assertion is <View model={[styles.card, styles.elevation]}> <View> <Textual content model={kinds.heading}> React Native Field Shadow (Elevation) </Textual content> </View> <Textual content> Utilizing the elevation model prop to use box-shadow for Android units </Textual content> </View>

Tiếp theo, nhập StyleSheet một lần nữa để tạo kiểu cho thẻ:

// keep in mind to import StyleSheet from react-native const kinds = StyleSheet.create({ heading: { fontSize: 18, fontWeight: ‘600’, marginBottom: 13, }, card: { backgroundColor: ‘white’, borderRadius: 8, paddingVertical: 45, paddingHorizontal: 25, width: ‘100%’, marginVertical: 10, }, elevation: { elevation: 20, shadowColor: ‘#52006A’, }, });

Bằng cách đặt độ cao thành 20 với một shadowColor, chúng tôi có thể áp dụng bóng hộp cho thành phần thẻ Android của mình.

Lưu ý rằng không có quyền kiểm soát bán kính mờ, độ mờ và độ lệch của bóng hộp; chúng ta chỉ có quyền kiểm soát màu của bóng đổ.

Bóng hộp đa nền tảng React Native

Trong phần này, chúng tôi sẽ kết hợp đạo cụ kiểu độ cao và đạo cụ bóng để thực hiện bóng hộp cho cả thiết bị Android và iOS thay vì sử dụng hai quy trình riêng biệt.

Sử dụng API nền tảng từ React Native, hãy tạo một hàm mà sau này chúng ta có thể gọi để hiển thị bóng hộp có điều kiện cho thành phần thẻ của chúng tôi dựa trên thiết bị của người dùng.

Chúng tôi sẽ bắt đầu bằng cách thiết lập thẻ:

<View model={[styles.card, styles.boxShadow]}> <View> <Textual content model={kinds.heading}> React Native cross-platform field shadow </Textual content> </View> <Textual content>Utilizing the Platform API to conditionally render field shadow</Textual content> </View>

Tiếp theo, bên dưới đối tượng kinds của chúng ta, hãy tạo generateBoxShadowStyle chức năng áp dụng bóng hộp dựa trên hệ điều hành của người dùng:

Với mã chúng tôi vừa triển khai, ứng dụng của chúng tôi hiện có thể kiểm tra nền tảng thiết bị của người dùng và áp dụng các đạo cụ bóng hộp thích hợp.

Bây giờ chúng ta hãy gọi generateBoxShadowStyle hàm và chuyển giá trị của các đạo cụ đổ bóng và độ cao của chúng ta dưới dạng đối số:

generateBoxShadowStyle(-2, 4, ‘#171717’, 0.2, 3, 4, ‘#171717’);

Sau đó, nó hiển thị những điều sau cho cả hai nền tảng:

Để đơn giản hóa quy trình làm việc của chúng tôi, hãy sử dụng công cụ React Native Shadow Generator để tạo mã cho bóng hộp và xem bản xem trước của bóng hộp trên cả Android và iOS.

Giới hạn bóng hộp đa nền tảng

Trong khi chúng tôi áp dụng bóng hộp tiêu chuẩn, có những trường hợp sử dụng khi chúng tôi có thể cần toàn quyền kiểm soát độ lệch, độ mờ và bán kính mờ của bóng hộp. Điều này có thể bao gồm:

Áp dụng một bóng hộp cho một <FlatList> hoặc là <Pressable> thành phần có kiểu tùy chỉnh
Thêm thiết kế bóng hộp tùy chỉnh nhất quán trên cả nền tảng Andriod và iOS

Với cách triển khai hiện tại, tính linh hoạt trong thiết kế này là không thể. Tuy nhiên, chúng ta có thể khắc phục những hạn chế này với react-native-drop-shadow.

Áp dụng một bóng hộp với react-native-drop-shadow

Các react-native-drop-shadow gói là một View thành phần lấy thành phần lồng nhau của nó, tạo biểu diễn bitmap, sau đó làm mờ và tô màu nó thành các giá trị bóng của kiểu, tương tự như áp dụng bóng trong iOS với các đạo cụ bóng.

Để bắt đầu, hãy cài đặt react-native-drop-shadow gói bằng một trong các lệnh sau:

yarn add react-native-drop-shadow #or npm i react-native-drop-shadow

Sau khi quá trình cài đặt hoàn tất, hãy đồng bộ hóa lại bộ công cụ xây dựng Android Gradle hoặc khởi động lại máy chủ phát triển.

Tiếp theo, chúng ta có thể nhập gói:

import DropShadow from “react-native-drop-shadow”;

Bây giờ, hãy tạo một nút tùy chỉnh bằng cách sử dụng <Pressable> và bọc nó bằng DropShadow thành phần chúng tôi vừa nhập khẩu.

Bóng hộp trên nút trong ảnh chụp màn hình bên dưới là những gì chúng tôi muốn tạo. Lưu ý sự nhất quán trong cả hai nền tảng Android và iOS:

Các DropShadow thành phần là thành phần chính của <Pressable> , mà chúng tôi đã tạo kiểu để trông giống như một nút. Chúng tôi muốn nó theo thứ tự này vì chúng tôi muốn áp dụng bóng đổ cho nút của chúng tôi chứ không phải văn bản trong nút:

// wherever your return assertion is // Do not forget to import the Pressable element from react-native <DropShadow model={kinds.shadowProp}> <Pressable model={kinds.button} onPress={() => console.log(‘pressed’)}> <Textual content model={(kinds.textual content, kinds.buttonText)}>See extra</Textual content> </Pressable> </DropShadow>

Để làm cho của chúng tôi <Pressable> thành phần trông giống như một nút và thêm bóng đổ vào DropShadow thành phần, thêm biểu định kiểu sau:

const kinds = StyleSheet.create({ shadowProp: { shadowColor: ‘#171717’, shadowOffset: {width: 0, peak: 3}, shadowOpacity: 0.4, shadowRadius: 2, }, button: { backgroundColor: ‘#4830D3’, alignItems: ‘middle’, justifyContent: ‘middle’, peak: 42, borderRadius: 4, marginTop: 30, }, buttonText: { coloration: ‘#fff’, }, textual content: { fontSize: 16, lineHeight: 21, fontWeight: ‘daring’, letterSpacing: 0.25, }, });

Sử dụng react-native-shadow-2

Các react-native-shadow-2 gói là một phiên bản cải tiến của react-native-shadow bằng cách cung cấp nhiều chức năng hơn, hỗ trợ Typecript và được viết từ đầu để giảm bớt sự phụ thuộc ảnh hưởng đến hiệu suất.

Không giống như triển khai một bóng đổ với react-native-drop-shadow, tạo ra một biểu diễn bitmap của các thành phần con của nó, react-native-shadow-2 sử dụng plugin shadow react-native-svg để triển khai nhất quán trên các nền tảng Android và iOS.

Để bắt đầu, hãy cài đặt cả hai gói này trong thư mục gốc của dự án:

yarn add react-native-svg react-native-shadow-2 #or npm i react-native-svg react-native-shadow-2

Để đảm bảo điều này chạy trên iOS, CD vào ios thư mục và chạy pod set up để đồng bộ hóa các gói chúng tôi vừa cài đặt:

// import the package deal proper on the prime import {Shadow} from ‘react-native-shadow-2’; // wherever your return assertion is <Shadow distance={5} startColor={‘#00000010’} containerViewStyle={{marginVertical: 20}} radius={8}> <View model={[styles.card, {marginVertical: 0}]}> <View> <Textual content model={kinds.heading}> React Native cross-platform field shadow </Textual content> </View> <Textual content model={kinds.boxShadow}> Utilizing the Platform API to conditionally render field shadow </Textual content> <DropShadow model={kinds.shadowProp}> <Pressable model={kinds.button} onPress={() => console.log(‘pressed’)}> <Textual content model={(kinds.textual content, kinds.buttonText)}>See extra</Textual content> </Pressable> </DropShadow> </View> </Shadow>

Mã tạo ra như sau:

Phần kết luận

Vấn đề chính với các đạo cụ bóng trong React Native là chúng không thể được sử dụng trong các ứng dụng Android.

Tuy nhiên, bằng cách sử dụng react-native-drop-shadow và react-native-shadow-2, chúng tôi có thể dễ dàng triển khai các bóng hộp nhất quán vào các ứng dụng React Native của mình cho cả nền tảng Android và iOS.

Mã đầy đủ được sử dụng trong hướng dẫn này có sẵn trên GitHub. Hãy thả một bình luận để cho tôi biết những gì bạn nghĩ về bài viết này. Bạn cũng có thể tìm thấy tôi trên Twitter và GitHub. Cảm ơn bạn đã đọc!