Bọc các thành phần gốc React của bạn

Lưu ý: Bài này đã cũ. Tôi không nghĩ rằng tôi vẫn sẽ nói rằng các gói thành phần văn bản của Google là tốt nhất. Thay vào đó, tôi đã xác định nửa tá kiểu phông chữ mà tôi đã sử dụng trong một tệp riêng biệt có thể được nhập và lan truyền sang các định nghĩa kiểu (hoặc cảm xúc) khi cần.

Mọi người có thể nghĩ rằng vì các thành phần cốt lõi React Native là các lớp, nên chúng nên được mở rộng. Nhưng như Dan Abramov đã tuyên bố, đó không phải là một ý tưởng tuyệt vời. Bạn có thể thực hiện các thành phần bậc cao hơn nhưng thực sự những gì bạn có thể cần chỉ là thay thế việc sử dụng các thành phần gốc phản ứng cốt lõi nhất định bằng thứ gì đó mạnh hơn một chút. Đó là nơi mà gói đến.

Chỉ cần bọc một thành phần RN cốt lõi trong một chút chức năng UI, bạn giữ cho mã của mình sạch sẽ và cũng đặt các thuộc tính toàn cục. Đối với các nhà phát triển RN có kinh nghiệm, hãy xem qua các bảng định kiểu của bạn và tìm hiểu số lần bạn sử dụng Biểu định kiểu để xử lý các mối quan tâm về bố cục. Bạn muốn thoát khỏi điều đó? Tôi đã làm. Đối với người mới, tôi hy vọng bài đăng này giúp bạn tìm hiểu flexbox bằng cách cung cấp cho bạn một công cụ đơn giản hóa nó đáng kể.

Đồ họa này cho thấy làm thế nào nó hoạt động trong một tóm tắt. Tôi sẽ đi qua nó sau. Nhưng tôi muốn đề cập đầu tiên tại sao nó quan trọng đến mức bạn bọc một số thành phần cốt lõi RN nhất định trong mã tùy chỉnh của riêng bạn.

Đây chỉ là một ví dụ về một thành phần được bao bọc mà tôi thích sử dụng và có nguồn mở. Nhưng bạn sẽ tìm thấy thường xuyên hơn bạn cần phải bọc của riêng bạn. Tôi sẽ giải thích.

I xôngve đã tạo ra hai ứng dụng gốc phản ứng được xuất bản và sau khi cấu trúc lại dự án cuối cùng, tôi đã quyết định có 3 ba điều bạn chắc chắn nên luôn luôn gói gọn.

  1. Bản văn
  2. Cảm ứng
  3. Lượt xem

Để rõ ràng, gói có nghĩa là bạn sẽ nhập và sử dụng thành phần Văn bản của riêng bạn từ src thay vì thành phần từ RN. Bạn sẽ bọc nó.

Bản văn

Bạn gần như phải bọc Văn bản vì hai lý do. Một lý do là bạn không muốn nhập và khai báo cùng một phông chữ trong mọi thành phần trong ứng dụng của mình. Bạn muốn đặt phông chữ làm mặc định cho tất cả các thành phần Văn bản hoặc có thể dễ dàng chuyển đổi giữa các phông chữ bằng cách nào đó.

Một lý do khác nói lên một vấn đề lớn hơn mà bạn cần hiểu về React Native UI. FontSize là số lượng pixel sẽ xuất hiện khác nhau trên các thiết bị khác nhau với độ phân giải khác nhau. Điều này cũng đúng về chiều cao, chiều rộng, lề, phần đệm và vị trí tuyệt đối là tốt. Đó là lý do tại sao phải luôn cố gắng sử dụng flex cho bố cục khi có thể và nếu không, hãy cân nhắc sử dụng getPixelSizeForLayoutSize bất cứ khi nào thiết lập các thuộc tính này. Đó là một nỗi đau, nhưng hãy coi đó là lý do để thực sự cố gắng hoàn thành mọi thứ với flexbox trước.

Tuy nhiên, đối với Văn bản, bạn cần tránh đặt fontSize dưới dạng pixel bằng cách nào đó. Tôi chỉ cho bạn thấy những gì tôi sử dụng, mượn từ bài viết SO này.

Về bản chất, gói như thế này thực sự là ánh xạ đạo cụ theo phong cách. Một số người có thể coi đó là một mô hình chống, nhưng kết quả là một công cụ tuyệt vời cho nhà phát triển có đầu óc tối thiểu. Thay vì nhập Văn bản từ ’Reac -igen, thay vào đó, bạn sẽ nhập Văn bản từ‘ /components/Text.js, hoặc bất cứ nơi nào bạn quyết định đặt nó.

Các đạo cụ được hiển thị sẽ bao gồm phần lớn các kiểu của bạn, vì vậy bạn có thể không cần phải tạo ra một mục Biểu định kiểu nào cả.

Đó là cách tôi sử dụng nó. Nó khá sạch sẽ và tôi biết văn bản này sẽ trông như thế nào mà không cần phải tham khảo biểu định kiểu.

Cảm ứng

Có rất nhiều mô-đun ngoài kia để bọc cái này, mặc dù không có mô-đun nào quá phổ biến, nhưng điểm cốt yếu là Touchable (NativeFeedback, v.v.) được xử lý khác nhau trên cả iOS và Android vì vậy bạn không nên nhập cái này từ React Tự nhiên. Bạn cũng có thể tìm thấy nhiều triển khai Nút, nhưng chúng có xu hướng được tạo kiểu

Lượt xem

Để xem, tôi sẽ đề nghị kiểm tra thành phần hàng phản ứng gốc của tôi.

Tôi đã quyết định một cái gì đó sau khi tôi tái cấu trúc UI của ứng dụng cuối cùng của mình. Tôi nhận ra rằng thay vì tìm các yếu tố có thể tái sử dụng và xứng đáng với tuyên bố của riêng họ, thay vào đó tôi lại tìm thấy những cảnh mà các yếu tố của người sói sử dụng trong các cảnh khác.

Tôi nghĩ đến những cách khác để giảm sự lộn xộn. Tôi nhớ phải đặt flexDirection: hàng khi nó thường là thuộc tính duy nhất để đặt. Tôi bắt đầu bằng cách tạo một trình bao bọc xung quanh View để làm việc đó. Nhưng sau đó tôi nhận thấy nhiều lần tôi chỉ sử dụng alignItems và justifyContents.

Đủ để nói rằng cuối cùng tôi đã tạo ra một trình bao bọc đã làm điều mà một nửa tôi hy vọng nó sẽ làm được. Nó khiến các khai báo Biểu định kiểu của tôi không cần thiết.

Hãy bắt đầu với cảnh này. Nó một màn hình quản lý hồ sơ. Có aren bất kỳ thành phần có thể tái sử dụng ở đây ngoài các Nút và có lẽ là logo. Có một thành phần ScrollView mà tôi không có kế hoạch thực sự sử dụng ở bất kỳ nơi nào khác trong ứng dụng.

Vì vậy, về cơ bản, mục tiêu chính của trang này là sắp xếp các yếu tố, rất nhiều trong số đó là Văn bản.

Vì vậy, nhìn vào mã cho phần trên cùng của trang này, bạn có thể thấy một chút pha trộn giữa các kiểu nội tuyến và cách sử dụng Biểu định kiểu. Không lý tưởng, nhưng những lợi thế của người này chưa bao giờ thuyết phục tôi loại trừ cái này hay cái kia như một vấn đề quy ước.

Tôi đã thay đổi điều này một chút, thừa nhận sự chậm chạp và cách sử dụng kiểu không chính xác, nhưng những thứ như thế này đã xảy ra bởi vì tôi chưa bao giờ tìm đến một cách tốt hơn để xử lý các kiểu. Nhưng chúng ta có thực sự tuyên bố phong cách của người dùng ở đây không? Tất cả mọi thứ bên ngoài các phong cách văn bản thực sự quan tâm bố trí.

Tôi đặt ra để loại bỏ sự cần thiết phải tự hỏi mình nên xử lý các kiểu bố trí ở đâu vì với flexbox, chúng thực sự là phong cách. Flexbox xứng đáng với vị trí của riêng mình bên ngoài phong cách bởi vì nó rất mạnh mẽ, nhưng thường bị hiểu lầm.

Hãy xem điều gì xảy ra khi chúng ta thay thế việc gán bố cục flexbox bằng một cái gì đó trực quan và súc tích hơn.

Đủ đơn giản?

Lưu ý về hàng phản ứng gốc: Hàng là Chế độ xem với flexDirection: 'hàng' và quay số đặt vị trí của tất cả các thành phần con thành vị trí của số 5 trên mặt số điện thoại - và flex, được sử dụng ở đây dưới dạng boolean, đặt flex tài sản đến 1.

Sử dụng hàng phản ứng gốc và thành phần Văn bản ở trên, I Lượngve đã di chuyển tất cả các thuộc tính flexbox ra khỏi kiểu hoàn toàn và làm cho cảnh của tôi phản ứng nhanh hơn.

Suy nghĩ?

Tôi không phải là chuyên gia về React, nhưng tôi đã dành một năm với React Native và đây là điều có ý nghĩa với tôi. Có cách nào tốt hơn để thực hiện điều này? Có lẽ. Có phải là một mô hình chống? Có lẽ. Tôi thích nghe những gì mọi người nghĩ.