Duong Tran

Duong Tran

1658262600

Tạo Các Thành Phần Chế độ Xem NativeScript Tùy Chỉnh

Có một số tùy chọn thuận tiện với NativeScript để xây dựng giao diện người dùng cho ứng dụng của bạn. Bạn có thể sử dụng các thành phần ui cốt lõi của khung công tác cung cấp một đường cơ sở tốt đẹp về các thành phần phổ biến mà hầu hết mọi ứng dụng có thể cần. Bạn có thể bao gồm các plugin nền tảng cung cấp trải nghiệm xem tùy chỉnh và độc đáo. Hoặc bạn có thể xây dựng của riêng bạn từ đầu, đó là những gì chúng tôi sẽ tập trung vào trong bài viết này.

Nền tảng di động ngắn gọn

Trên iOS, kiến ​​trúc khung nhìn sử dụng một cấu trúc kế thừa được chính thức hóa và trưởng thành được gọi là cấu trúc UIKitcó thể được khám phá trong tài liệu của Apple tại đây . Lớp cơ sở mà tất cả kế thừa từ đó là UIView . Từ lớp lõi này và bất kỳ lớp con nào của nó mà bạn có thể xây dựng các chế độ xem NativeScript tùy chỉnh.

Trên Android, kiến ​​trúc khung nhìn sử dụng cấu trúc kế thừa đã được chính thức hóa và hoàn thiện tương tự. Gói android.viewnày cung cấp khối xây dựng khung nhìn cơ bản, lớp View . Điều này tương tự như iOS và đóng vai trò như một lớp chế độ xem cơ sở cho các mục đích tương tự trên Android.

Với NativeScript, bạn sẽ nhận được một lớp cơ sở cũng được gọi là View , lớp này cuộn lên cả hai lớp trên tương ứng cho mỗi nền tảng, cho phép bạn làm việc chỉ với 1 api nhất quán so với 2 api khác nhau trong khi vẫn đạt được các đặc tính hiệu suất giống nhau trên mỗi nền tảng.

Giải phẫu chế độ xem NativeScript tùy chỉnh

Cơ chế mà NativeScript sử dụng để cung cấp sự nhất quán tốt đẹp này giữa thành phần chế độ xem cả iOS và Android mở cho bạn sử dụng để mở khóa khả năng sáng tạo chóng mặt cho sự phát triển trên thiết bị di động.

Chế độ xem tùy chỉnh có thể được tạo bằng cách sau:

import { View } from 'tns-core-modules/ui/core/view';

export class MyCustomView extends View {
  createNativeView() {
    /**
     * required
     * This must return a native iOS or Android view
     */
    return (UIView || android.view.View);
  }
  initNativeView() {
    // optional
  }
  disposeNativeView() {
    // optional
  }
}

Với các dự án Angular, bạn có thể đăng ký phần tử mới này để sử dụng. Một nơi tốt để đăng ký là trong thành phần ứng dụng gốc của bất kỳ ứng dụng Angular nào:

import { registerElement } from 'nativescript-angular/element-registry';

// register custom views for your app
registerElement('MyCustomView', () => require('../path/to/custom-view').MyCustomView);

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent {}

Giờ đây, bạn có thể tự do sử dụng chế độ xem gốc tùy chỉnh của mình ở bất kỳ đâu trong ứng dụng như bạn có thể mong đợi:

<MyCustomView></MyCustomView>

Cần lưu ý rằng bạn có thể sử dụng bất kỳ lớp NativeScript nào làm cơ sở cho chế độ xem gốc tùy chỉnh của mình. Ví dụ: nếu bạn muốn tạo một Nút tùy chỉnh, bạn có thể mở rộng NativeScript Buttonhoặc nếu bạn muốn tạo một vùng chứa bố cục tùy chỉnh độc đáo, bạn có thể mở rộng NativeScript GridLayout. Khả năng là rất lớn.

Phương pháp hay nhất về chế độ xem tùy chỉnh

Bạn chắc chắn có thể xây dựng 1 lớp chế độ xem tùy chỉnh và chèn isIOShoặc isAndroidcác điều kiện như sau:

createNativeView() {
  if (isIOS) {
    return UIView;
  } else if (isAndroid) {
    return android.view.View;
  }
}

Đừng làm điều này . Đây sẽ là một thực tiễn không tốt vì nó chắc chắn sẽ trở nên khó duy trì theo thời gian, chưa kể đến việc dễ dàng đưa ra các lỗi theo cách này.

Thay vào đó, NativeScript hỗ trợ .ios.androidhậu tố tên tệp để phân chia chức năng nền tảng một cách rõ ràng như sau:

  • custom-view.ios.ts:
createNativeView() {
  return UIView;
}
  • custom-view.android.ts:
createNativeView() {
  return android.view.View;
}

Như người ta có thể mong đợi, điều này hiện gây ra một câu hỏi hóc búa về cách thực sự nhập và sử dụng sự phân chia như vậy trên hành vi nền tảng trong một cơ sở mã thống nhất duy nhất. Đây là nơi các tệp định nghĩa TypeScript lưu trong ngày. Đối với bất kỳ lớp phân chia nền tảng nào bạn tạo, bạn sẽ luôn tạo một tệp định nghĩa đơn giản chỉ hiển thị tên lớp để nhập trong toàn bộ cơ sở mã của bạn:

  • custom-view.d.ts:
import { View } from 'tns-core-modules/ui/core/view';

export declare class MyCustomView extends View {}

Điều này bây giờ cho phép bạn nhập như bạn muốn:

import { MyCustomView } from '../path/to/custom-view';

Trường hợp sử dụng chế độ xem gốc tùy chỉnh

Thông thường, khi tích hợp các chế độ xem gốc tùy chỉnh hoặc nghiên cứu những gì có thể có cho dự án của bạn, điều tự nhiên cần làm là xem xét những plugin cộng đồng NativeScript có sẵn. Nếu không tìm thấy gì từ cộng đồng, nơi tiếp theo để tìm sẽ dành cho các plugin CocoaPod của iOS hoặc Android Gradle phù hợp với nhu cầu của bạn.

Nếu không có gì phù hợp với nhu cầu của tôi thì sao?

Bây giờ là nơi bạn có thể tự mình xây dựng một chế độ xem gốc tùy chỉnh.

Tôi sẽ chia sẻ một ví dụ về một ví dụ mà tôi đã phải xây dựng gần đây cho một dự án khách hàng. Trên thực tế, có một plugin cộng đồng có sẵn cho những gì chúng tôi cần bởi bậc thầy plugin tuyệt vời Eddy Verbruggen . Chúng tôi muốn tích hợp tính năng Đăng nhập Apple trên iOS 13 hoàn toàn mới. Hóa ra Eddy đã cung cấp một plugin cho việc này ở đây , rất hữu ích.

Tuy nhiên có một vấn đề. Như hầu hết các nhà phát triển di động đều biết, quy trình đánh giá ứng dụng của Apple đôi khi có thể đáng sợ cũng như rất khó chịu. Với bất kỳ triển khai tính năng iOS nào, bạn thường muốn xem lại các nguyên tắc của Apple về cách sử dụng và liệu có bất kỳ quy tắc nào liên quan đến trường hợp sử dụng của bạn hay không. Với Apple SignIn, tài liệu của họ có một Guidelinesphần cụ thể :

Nguyên tắc Khi bạn lập kế hoạch và thiết kế ứng dụng hoặc trang web của mình để Đăng nhập với Apple, hãy đảm bảo tuân theo các nguyên tắc sau: Nguyên tắc về giao diện con người Nguyên tắc đánh giá trên App Store Nguyên tắc sử dụng cho các trang web và các nền tảng khác Thỏa thuận cấp phép chương trình dành cho nhà phát triển của Apple

Cụ thể, Nguyên tắc về Giao diện Con người nêu rõ điều này:

Để giúp mọi người thiết lập tài khoản và đăng nhập, tốt nhất bạn nên sử dụng các nút quen thuộc mà Apple cung cấp cho Đăng nhập với Apple. Khi bạn sử dụng các API do hệ thống cung cấp để tạo nút Đăng nhập bằng Apple, bạn sẽ nhận được: Một nút được đảm bảo sử dụng tiêu đề, phông chữ, màu sắc và kiểu được Apple phê duyệt Đảm bảo rằng nội dung của nút duy trì tỷ lệ lý tưởng khi bạn thay đổi > style Dịch tự động tiêu đề của nút sang ngôn ngữ được đặt cho thiết bị> Hỗ trợ định cấu hình bán kính góc của nút để phù hợp với kiểu giao diện người dùng của bạn> (iOS, macOS và web) Nhãn văn bản thay thế do hệ thống cung cấp cho phép VoiceOver mô tả nút

Ngôn ngữ ở đây giống như một đề xuất / gợi ý sử dụng nút của riêng họ để đảm bảo bạn không vô tình sử dụng tiêu đề, phông chữ, màu sắc và phong cách chưa được phê duyệt. Do đó, chúng tôi không muốn có nguy cơ bị từ chối trong App Store vì không sử dụng đúng kiểu nút đã được phê duyệt. Một điều khác xuất hiện ở đây mà cuối cùng đã trở thành một lợi ích tuyệt vời khi sử dụng nút Đăng nhập Apple gốc của họ là:

Bản dịch tự động tiêu đề của nút sang ngôn ngữ được đặt cho> thiết bị

Ứng dụng này là quốc tế và có bản dịch tự động là một phần thưởng lớn, đặc biệt là khi xem xét chuỗi có thể dịch chính xác mà Apple sẽ chấp thuận cho đăng nhập cũng có thể quan trọng.

Quay lại plugin nativescript-apple-sign-in của Eddy . Chúng tôi hoàn toàn muốn sử dụng điều này vì nó cung cấp triển khai xác thực mà nếu không, chúng tôi sẽ phải tự viết. Tuy nhiên, nó không cung cấp thành phần nút SignIn gốc có thể trở thành một vấn đề trên Apple Review.

Vì vậy, hãy xây dựng một cái.

Xây dựng nút Đăng nhập Apple

Chúng tôi bắt đầu bằng cách thực hiện chính xác những gì chúng tôi đã thảo luận ở trên bằng cách tạo các tệp phân chia nền tảng để chuẩn bị cho thành phần chế độ xem gốc tùy chỉnh của chúng tôi:

  • apple-signin-button.ios.ts:
export class AppleSignInButton extends View {
  createNativeView() {
    return UIView.alloc().initWithFrame(CGRectMake(0, 0, 0, 0));
  }
}
  • apple-signin-button.android.ts:
export class AppleSignInButton extends View {
  createNativeView() {
    return new android.widget.LinearLayout(this._context);
  }
}
  • apple-signin-button.d.ts:
import { View } from 'tns-core-modules/ui/core/view';

export declare class AppleSignInButton extends View {}

Đối với chế độ xem iOS, chúng tôi bắt đầu với khối xây dựng cơ bản của tất cả các chế độ xem iOS như đã đề cập, UIView. Điều này cho thấy làm thế nào để init một đúng cách. Tương tự như vậy trên Android, chúng tôi sử dụng một vùng chứa bố cục Android gốc chung , lấy tham contextsố này làm đối số được cung cấp một cách thuận tiện bởi lớp cha của NativeScript View.

Để gõ tự do với intellisense dựa trên các api gốc của iOS và Android thuần túy như thế này, hãy đảm bảo cài đặt các tệp định nghĩa nền tảng của NativeScript với:

npm i tns-platform-declarations --save-dev

Sau đó, bạn có thể tham chiếu chúng trong references.d.tstệp gốc dự án của mình (nếu bạn không có, chỉ cần tạo tệp này trong thư mục gốc của dự án) với nội dung sau:

/// <reference path="./node_modules/tns-platform-declarations/ios.d.ts" />
/// <reference path="./node_modules/tns-platform-declarations/android-19.d.ts" />

Trên thực tế, bắt đầu với thiết lập chính xác này khi bắt đầu xây dựng chế độ xem gốc tùy chỉnh của bạn là một cách tuyệt vời để bắt đầu. Sau khi đăng ký phần tử này như được hiển thị trước đó, bây giờ nó sẽ chạy bình thường trên cả iOS và Android. Bạn sẽ không nhìn thấy bất cứ thứ gì trực quan bởi vì chúng tôi chưa tạo ra bất kỳ thứ gì độc đáo.

Hãy tập trung nỗ lực của chúng tôi vào iOS vì đây sẽ là tính năng duy nhất của iOS tại thời điểm hiện tại, tuy nhiên Đăng nhập bằng Apple trên Android vẫn có thể thực hiện được như đã đề cập ở đây .

Một điều quan trọng luôn xảy ra với quá trình phát triển iOS là nhận dạng các tính năng có thể chỉ có trên một số phiên bản iOS nhất định. Đăng nhập Apple chỉ khả dụng bắt đầu từ iOS 13 trở lên. May mắn thay, plugin của Eddy cung cấp một phương pháp boolean hay để kiểm tra điều này.

Sử dụng tài liệu của Apple làm tài liệu tham khảo , chúng tôi có thể triển khai nút theo thông số kỹ thuật của họ với các thông số sau đồng thời cho phép nó giảm cấp một cách duyên dáng trên các phiên bản iOS không được hỗ trợ:

import { View } from 'tns-core-modules/ui/core/view';
import { isSignInWithAppleSupported } from 'nativescript-apple-sign-in';

declare var ASAuthorizationAppleIDButton, ASAuthorizationAppleIDButtonType, ASAuthorizationAppleIDButtonStyle;

export declare class AppleSignInButton extends View {
  private _tapHandler: NSObject;

  createNativeView() {
    if (isSignInWithAppleSupported()) {
      const nativeView = ASAuthorizationAppleIDButton.buttonWithTypeStyle(
        ASAuthorizationAppleIDButtonType.SignIn,
        ASAuthorizationAppleIDButtonStyle.WhiteOutline,
      );
      nativeView.cornerRadius = 50;
      this._tapHandler = AppleSignInButtonTapHandlerImpl.initWithOwner(new WeakRef(this));
      nativeView.addTargetActionForControlEvents(this._tapHandler, 'tap', UIControlEvents.TouchUpInside);
      return nativeView;
    } else {
      return UIView.alloc().initWithFrame(CGRectMake(0, 0, 0, 0));
    }
  }
  disposeNativeView() {
    // teardown
    this._tapHandler = null;
    super.disposeNativeView();
  }
}
const AppleSignInButtonTapHandlerImpl = (<any>NSObject).extend(
  {
    tap: function(nativeButton: any, nativeEvent: any) {
      const owner: AppleSignInButton = nativeButton._owner;
      if (owner) {
        owner.notify({
          eventName: 'tap',
          object: owner,
        });
      }
    },
  },
  {
    exposedMethods: {
      tap: {
        returns: interop.types.void,
        params: [interop.types.id, interop.types.id],
      },
    },
  },
);
AppleSignInButtonTapHandlerImpl['initWithOwner'] = function(owner: WeakRef<AppleSignInButton>) {
  const handler = AppleSignInButtonTapHandlerImpl.new();
  handler._owner = owner;
  return handler;
};

Có rất nhiều thứ để giải nén ở đó vì nó sử dụng api iOS thuần túy, đây là một trong những điều thú vị và thú vị khi làm việc với NativeScript. Khả năng viết mã tự do cho nền tảng bạn đang xây dựng mà không bị chậm trễ hoặc phức tạp và với ngôn ngữ lựa chọn, bạn đang xây dựng phần còn lại của toàn bộ ứng dụng của mình, TypeScript.

Chúng tôi có thể sử dụng thành phần này như sau:

<AppleSignInButton (tap)="appleSignInAction($event)"></AppleSignInButton>

Đây là cách điều này hiển thị trực tiếp trong ứng dụng mẫu NativeScript:

Chế độ xem NativeScript tùy chỉnh

Tôi sẽ không trình bày mọi chi tiết ở đây, tuy nhiên có một số điều cần lưu ý:

  • Chúng tôi đang triển khai một thành phần chế độ xem chính xác để chỉ định như tài liệu iOS đã phác thảo
  • Bằng cách mở rộng NativeScript, Viewchúng tôi có thể tận dụng notifyapi để truyền bá một cử chỉ iOS thuần túy gốc taptrực tiếp thông qua api của thành phần của chúng tôi để dễ dàng liên kết dữ liệu
  • Chúng tôi đang sử dụng một cú pháp thay thế để mở rộng NSObjectbằng cách sử dụng NSObject.extend({...mẫu thường an toàn hơn để sử dụng ngay cả khi bạn quyết định biên dịch ứng dụng của mình sang ES6 - hãy xem vấn đề này để hiểu thêm
  • Chúng tôi đang sử dụng không gian tên của NativeScript interopđể xử lý chính xác việc hiển thị các đối số của phương thức cử chỉ gốc. Không interopgian tên “Cung cấp một API để làm việc với các kiểu C, con trỏ, số học con trỏ và bộ nhớ.”
  • Trong ví dụ này, chúng tôi đang sử dụng một phím tắt TypeScript nhanh bằng cách sử dụng declare var ASAuthorizationAppleIDButtonở trên cùng của thành phần của chúng tôi. Tuy nhiên, bạn có thể sử dụng các khai báo nền tảng NativeScript mới nhất sẽ cung cấp các ký hiệu đó trên toàn cầu cho IDE TypeScript của bạn. Trong trường hợp các kiểu không được cung cấp bởi NativeScript (tức là, nếu sử dụng plugin của bên thứ 3 không được cung cấp trực tiếp bởi các khung iOS), bạn có thể tạo các kiểu đánh máy cho bất kỳ plugin nào của bên thứ 3 đi kèm bằng cách chạy: thao TNS_TYPESCRIPT_DECLARATIONS_PATH="$(pwd)/typings" tns build iostác này sẽ tạo tất cả các tệp định nghĩa kiểu cho của bạn ứng dụng bên trong một typingsthư mục
  • Mặc dù điều này được triển khai hoàn toàn cho iOS, chúng tôi vẫn có thể xây dựng Android theo cách tương tự. Tuy nhiên, thực tế chúng tôi quay lại new android.widget.LinearLayout(this._context)trên Android sẽ đảm bảo rằng việc sử dụng thành phần này sẽ không làm ứng dụng của chúng tôi gặp sự cố khi thành phần được khởi chạy trên Android vì createNativeViewbắt buộc phải trả lại chế độ xem gốc. Nó sẽ chỉ hiển thị một LinearLayout trống do đó sẽ không hiển thị.

Chúc bạn vui vẻ khi tạo các chế độ xem gốc tùy chỉnh của riêng bạn!

Bạn có thể khám phá và chạy tất cả mã được đề cập trong bài viết này tại đây .

Nguồn: https://ultimatecourses.com/blog/custom-native-view-components-nativescript

#nativescript 

What is GEEK

Buddha Community

Tạo Các Thành Phần Chế độ Xem NativeScript Tùy Chỉnh
Duong Tran

Duong Tran

1658262600

Tạo Các Thành Phần Chế độ Xem NativeScript Tùy Chỉnh

Có một số tùy chọn thuận tiện với NativeScript để xây dựng giao diện người dùng cho ứng dụng của bạn. Bạn có thể sử dụng các thành phần ui cốt lõi của khung công tác cung cấp một đường cơ sở tốt đẹp về các thành phần phổ biến mà hầu hết mọi ứng dụng có thể cần. Bạn có thể bao gồm các plugin nền tảng cung cấp trải nghiệm xem tùy chỉnh và độc đáo. Hoặc bạn có thể xây dựng của riêng bạn từ đầu, đó là những gì chúng tôi sẽ tập trung vào trong bài viết này.

Nền tảng di động ngắn gọn

Trên iOS, kiến ​​trúc khung nhìn sử dụng một cấu trúc kế thừa được chính thức hóa và trưởng thành được gọi là cấu trúc UIKitcó thể được khám phá trong tài liệu của Apple tại đây . Lớp cơ sở mà tất cả kế thừa từ đó là UIView . Từ lớp lõi này và bất kỳ lớp con nào của nó mà bạn có thể xây dựng các chế độ xem NativeScript tùy chỉnh.

Trên Android, kiến ​​trúc khung nhìn sử dụng cấu trúc kế thừa đã được chính thức hóa và hoàn thiện tương tự. Gói android.viewnày cung cấp khối xây dựng khung nhìn cơ bản, lớp View . Điều này tương tự như iOS và đóng vai trò như một lớp chế độ xem cơ sở cho các mục đích tương tự trên Android.

Với NativeScript, bạn sẽ nhận được một lớp cơ sở cũng được gọi là View , lớp này cuộn lên cả hai lớp trên tương ứng cho mỗi nền tảng, cho phép bạn làm việc chỉ với 1 api nhất quán so với 2 api khác nhau trong khi vẫn đạt được các đặc tính hiệu suất giống nhau trên mỗi nền tảng.

Giải phẫu chế độ xem NativeScript tùy chỉnh

Cơ chế mà NativeScript sử dụng để cung cấp sự nhất quán tốt đẹp này giữa thành phần chế độ xem cả iOS và Android mở cho bạn sử dụng để mở khóa khả năng sáng tạo chóng mặt cho sự phát triển trên thiết bị di động.

Chế độ xem tùy chỉnh có thể được tạo bằng cách sau:

import { View } from 'tns-core-modules/ui/core/view';

export class MyCustomView extends View {
  createNativeView() {
    /**
     * required
     * This must return a native iOS or Android view
     */
    return (UIView || android.view.View);
  }
  initNativeView() {
    // optional
  }
  disposeNativeView() {
    // optional
  }
}

Với các dự án Angular, bạn có thể đăng ký phần tử mới này để sử dụng. Một nơi tốt để đăng ký là trong thành phần ứng dụng gốc của bất kỳ ứng dụng Angular nào:

import { registerElement } from 'nativescript-angular/element-registry';

// register custom views for your app
registerElement('MyCustomView', () => require('../path/to/custom-view').MyCustomView);

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent {}

Giờ đây, bạn có thể tự do sử dụng chế độ xem gốc tùy chỉnh của mình ở bất kỳ đâu trong ứng dụng như bạn có thể mong đợi:

<MyCustomView></MyCustomView>

Cần lưu ý rằng bạn có thể sử dụng bất kỳ lớp NativeScript nào làm cơ sở cho chế độ xem gốc tùy chỉnh của mình. Ví dụ: nếu bạn muốn tạo một Nút tùy chỉnh, bạn có thể mở rộng NativeScript Buttonhoặc nếu bạn muốn tạo một vùng chứa bố cục tùy chỉnh độc đáo, bạn có thể mở rộng NativeScript GridLayout. Khả năng là rất lớn.

Phương pháp hay nhất về chế độ xem tùy chỉnh

Bạn chắc chắn có thể xây dựng 1 lớp chế độ xem tùy chỉnh và chèn isIOShoặc isAndroidcác điều kiện như sau:

createNativeView() {
  if (isIOS) {
    return UIView;
  } else if (isAndroid) {
    return android.view.View;
  }
}

Đừng làm điều này . Đây sẽ là một thực tiễn không tốt vì nó chắc chắn sẽ trở nên khó duy trì theo thời gian, chưa kể đến việc dễ dàng đưa ra các lỗi theo cách này.

Thay vào đó, NativeScript hỗ trợ .ios.androidhậu tố tên tệp để phân chia chức năng nền tảng một cách rõ ràng như sau:

  • custom-view.ios.ts:
createNativeView() {
  return UIView;
}
  • custom-view.android.ts:
createNativeView() {
  return android.view.View;
}

Như người ta có thể mong đợi, điều này hiện gây ra một câu hỏi hóc búa về cách thực sự nhập và sử dụng sự phân chia như vậy trên hành vi nền tảng trong một cơ sở mã thống nhất duy nhất. Đây là nơi các tệp định nghĩa TypeScript lưu trong ngày. Đối với bất kỳ lớp phân chia nền tảng nào bạn tạo, bạn sẽ luôn tạo một tệp định nghĩa đơn giản chỉ hiển thị tên lớp để nhập trong toàn bộ cơ sở mã của bạn:

  • custom-view.d.ts:
import { View } from 'tns-core-modules/ui/core/view';

export declare class MyCustomView extends View {}

Điều này bây giờ cho phép bạn nhập như bạn muốn:

import { MyCustomView } from '../path/to/custom-view';

Trường hợp sử dụng chế độ xem gốc tùy chỉnh

Thông thường, khi tích hợp các chế độ xem gốc tùy chỉnh hoặc nghiên cứu những gì có thể có cho dự án của bạn, điều tự nhiên cần làm là xem xét những plugin cộng đồng NativeScript có sẵn. Nếu không tìm thấy gì từ cộng đồng, nơi tiếp theo để tìm sẽ dành cho các plugin CocoaPod của iOS hoặc Android Gradle phù hợp với nhu cầu của bạn.

Nếu không có gì phù hợp với nhu cầu của tôi thì sao?

Bây giờ là nơi bạn có thể tự mình xây dựng một chế độ xem gốc tùy chỉnh.

Tôi sẽ chia sẻ một ví dụ về một ví dụ mà tôi đã phải xây dựng gần đây cho một dự án khách hàng. Trên thực tế, có một plugin cộng đồng có sẵn cho những gì chúng tôi cần bởi bậc thầy plugin tuyệt vời Eddy Verbruggen . Chúng tôi muốn tích hợp tính năng Đăng nhập Apple trên iOS 13 hoàn toàn mới. Hóa ra Eddy đã cung cấp một plugin cho việc này ở đây , rất hữu ích.

Tuy nhiên có một vấn đề. Như hầu hết các nhà phát triển di động đều biết, quy trình đánh giá ứng dụng của Apple đôi khi có thể đáng sợ cũng như rất khó chịu. Với bất kỳ triển khai tính năng iOS nào, bạn thường muốn xem lại các nguyên tắc của Apple về cách sử dụng và liệu có bất kỳ quy tắc nào liên quan đến trường hợp sử dụng của bạn hay không. Với Apple SignIn, tài liệu của họ có một Guidelinesphần cụ thể :

Nguyên tắc Khi bạn lập kế hoạch và thiết kế ứng dụng hoặc trang web của mình để Đăng nhập với Apple, hãy đảm bảo tuân theo các nguyên tắc sau: Nguyên tắc về giao diện con người Nguyên tắc đánh giá trên App Store Nguyên tắc sử dụng cho các trang web và các nền tảng khác Thỏa thuận cấp phép chương trình dành cho nhà phát triển của Apple

Cụ thể, Nguyên tắc về Giao diện Con người nêu rõ điều này:

Để giúp mọi người thiết lập tài khoản và đăng nhập, tốt nhất bạn nên sử dụng các nút quen thuộc mà Apple cung cấp cho Đăng nhập với Apple. Khi bạn sử dụng các API do hệ thống cung cấp để tạo nút Đăng nhập bằng Apple, bạn sẽ nhận được: Một nút được đảm bảo sử dụng tiêu đề, phông chữ, màu sắc và kiểu được Apple phê duyệt Đảm bảo rằng nội dung của nút duy trì tỷ lệ lý tưởng khi bạn thay đổi > style Dịch tự động tiêu đề của nút sang ngôn ngữ được đặt cho thiết bị> Hỗ trợ định cấu hình bán kính góc của nút để phù hợp với kiểu giao diện người dùng của bạn> (iOS, macOS và web) Nhãn văn bản thay thế do hệ thống cung cấp cho phép VoiceOver mô tả nút

Ngôn ngữ ở đây giống như một đề xuất / gợi ý sử dụng nút của riêng họ để đảm bảo bạn không vô tình sử dụng tiêu đề, phông chữ, màu sắc và phong cách chưa được phê duyệt. Do đó, chúng tôi không muốn có nguy cơ bị từ chối trong App Store vì không sử dụng đúng kiểu nút đã được phê duyệt. Một điều khác xuất hiện ở đây mà cuối cùng đã trở thành một lợi ích tuyệt vời khi sử dụng nút Đăng nhập Apple gốc của họ là:

Bản dịch tự động tiêu đề của nút sang ngôn ngữ được đặt cho> thiết bị

Ứng dụng này là quốc tế và có bản dịch tự động là một phần thưởng lớn, đặc biệt là khi xem xét chuỗi có thể dịch chính xác mà Apple sẽ chấp thuận cho đăng nhập cũng có thể quan trọng.

Quay lại plugin nativescript-apple-sign-in của Eddy . Chúng tôi hoàn toàn muốn sử dụng điều này vì nó cung cấp triển khai xác thực mà nếu không, chúng tôi sẽ phải tự viết. Tuy nhiên, nó không cung cấp thành phần nút SignIn gốc có thể trở thành một vấn đề trên Apple Review.

Vì vậy, hãy xây dựng một cái.

Xây dựng nút Đăng nhập Apple

Chúng tôi bắt đầu bằng cách thực hiện chính xác những gì chúng tôi đã thảo luận ở trên bằng cách tạo các tệp phân chia nền tảng để chuẩn bị cho thành phần chế độ xem gốc tùy chỉnh của chúng tôi:

  • apple-signin-button.ios.ts:
export class AppleSignInButton extends View {
  createNativeView() {
    return UIView.alloc().initWithFrame(CGRectMake(0, 0, 0, 0));
  }
}
  • apple-signin-button.android.ts:
export class AppleSignInButton extends View {
  createNativeView() {
    return new android.widget.LinearLayout(this._context);
  }
}
  • apple-signin-button.d.ts:
import { View } from 'tns-core-modules/ui/core/view';

export declare class AppleSignInButton extends View {}

Đối với chế độ xem iOS, chúng tôi bắt đầu với khối xây dựng cơ bản của tất cả các chế độ xem iOS như đã đề cập, UIView. Điều này cho thấy làm thế nào để init một đúng cách. Tương tự như vậy trên Android, chúng tôi sử dụng một vùng chứa bố cục Android gốc chung , lấy tham contextsố này làm đối số được cung cấp một cách thuận tiện bởi lớp cha của NativeScript View.

Để gõ tự do với intellisense dựa trên các api gốc của iOS và Android thuần túy như thế này, hãy đảm bảo cài đặt các tệp định nghĩa nền tảng của NativeScript với:

npm i tns-platform-declarations --save-dev

Sau đó, bạn có thể tham chiếu chúng trong references.d.tstệp gốc dự án của mình (nếu bạn không có, chỉ cần tạo tệp này trong thư mục gốc của dự án) với nội dung sau:

/// <reference path="./node_modules/tns-platform-declarations/ios.d.ts" />
/// <reference path="./node_modules/tns-platform-declarations/android-19.d.ts" />

Trên thực tế, bắt đầu với thiết lập chính xác này khi bắt đầu xây dựng chế độ xem gốc tùy chỉnh của bạn là một cách tuyệt vời để bắt đầu. Sau khi đăng ký phần tử này như được hiển thị trước đó, bây giờ nó sẽ chạy bình thường trên cả iOS và Android. Bạn sẽ không nhìn thấy bất cứ thứ gì trực quan bởi vì chúng tôi chưa tạo ra bất kỳ thứ gì độc đáo.

Hãy tập trung nỗ lực của chúng tôi vào iOS vì đây sẽ là tính năng duy nhất của iOS tại thời điểm hiện tại, tuy nhiên Đăng nhập bằng Apple trên Android vẫn có thể thực hiện được như đã đề cập ở đây .

Một điều quan trọng luôn xảy ra với quá trình phát triển iOS là nhận dạng các tính năng có thể chỉ có trên một số phiên bản iOS nhất định. Đăng nhập Apple chỉ khả dụng bắt đầu từ iOS 13 trở lên. May mắn thay, plugin của Eddy cung cấp một phương pháp boolean hay để kiểm tra điều này.

Sử dụng tài liệu của Apple làm tài liệu tham khảo , chúng tôi có thể triển khai nút theo thông số kỹ thuật của họ với các thông số sau đồng thời cho phép nó giảm cấp một cách duyên dáng trên các phiên bản iOS không được hỗ trợ:

import { View } from 'tns-core-modules/ui/core/view';
import { isSignInWithAppleSupported } from 'nativescript-apple-sign-in';

declare var ASAuthorizationAppleIDButton, ASAuthorizationAppleIDButtonType, ASAuthorizationAppleIDButtonStyle;

export declare class AppleSignInButton extends View {
  private _tapHandler: NSObject;

  createNativeView() {
    if (isSignInWithAppleSupported()) {
      const nativeView = ASAuthorizationAppleIDButton.buttonWithTypeStyle(
        ASAuthorizationAppleIDButtonType.SignIn,
        ASAuthorizationAppleIDButtonStyle.WhiteOutline,
      );
      nativeView.cornerRadius = 50;
      this._tapHandler = AppleSignInButtonTapHandlerImpl.initWithOwner(new WeakRef(this));
      nativeView.addTargetActionForControlEvents(this._tapHandler, 'tap', UIControlEvents.TouchUpInside);
      return nativeView;
    } else {
      return UIView.alloc().initWithFrame(CGRectMake(0, 0, 0, 0));
    }
  }
  disposeNativeView() {
    // teardown
    this._tapHandler = null;
    super.disposeNativeView();
  }
}
const AppleSignInButtonTapHandlerImpl = (<any>NSObject).extend(
  {
    tap: function(nativeButton: any, nativeEvent: any) {
      const owner: AppleSignInButton = nativeButton._owner;
      if (owner) {
        owner.notify({
          eventName: 'tap',
          object: owner,
        });
      }
    },
  },
  {
    exposedMethods: {
      tap: {
        returns: interop.types.void,
        params: [interop.types.id, interop.types.id],
      },
    },
  },
);
AppleSignInButtonTapHandlerImpl['initWithOwner'] = function(owner: WeakRef<AppleSignInButton>) {
  const handler = AppleSignInButtonTapHandlerImpl.new();
  handler._owner = owner;
  return handler;
};

Có rất nhiều thứ để giải nén ở đó vì nó sử dụng api iOS thuần túy, đây là một trong những điều thú vị và thú vị khi làm việc với NativeScript. Khả năng viết mã tự do cho nền tảng bạn đang xây dựng mà không bị chậm trễ hoặc phức tạp và với ngôn ngữ lựa chọn, bạn đang xây dựng phần còn lại của toàn bộ ứng dụng của mình, TypeScript.

Chúng tôi có thể sử dụng thành phần này như sau:

<AppleSignInButton (tap)="appleSignInAction($event)"></AppleSignInButton>

Đây là cách điều này hiển thị trực tiếp trong ứng dụng mẫu NativeScript:

Chế độ xem NativeScript tùy chỉnh

Tôi sẽ không trình bày mọi chi tiết ở đây, tuy nhiên có một số điều cần lưu ý:

  • Chúng tôi đang triển khai một thành phần chế độ xem chính xác để chỉ định như tài liệu iOS đã phác thảo
  • Bằng cách mở rộng NativeScript, Viewchúng tôi có thể tận dụng notifyapi để truyền bá một cử chỉ iOS thuần túy gốc taptrực tiếp thông qua api của thành phần của chúng tôi để dễ dàng liên kết dữ liệu
  • Chúng tôi đang sử dụng một cú pháp thay thế để mở rộng NSObjectbằng cách sử dụng NSObject.extend({...mẫu thường an toàn hơn để sử dụng ngay cả khi bạn quyết định biên dịch ứng dụng của mình sang ES6 - hãy xem vấn đề này để hiểu thêm
  • Chúng tôi đang sử dụng không gian tên của NativeScript interopđể xử lý chính xác việc hiển thị các đối số của phương thức cử chỉ gốc. Không interopgian tên “Cung cấp một API để làm việc với các kiểu C, con trỏ, số học con trỏ và bộ nhớ.”
  • Trong ví dụ này, chúng tôi đang sử dụng một phím tắt TypeScript nhanh bằng cách sử dụng declare var ASAuthorizationAppleIDButtonở trên cùng của thành phần của chúng tôi. Tuy nhiên, bạn có thể sử dụng các khai báo nền tảng NativeScript mới nhất sẽ cung cấp các ký hiệu đó trên toàn cầu cho IDE TypeScript của bạn. Trong trường hợp các kiểu không được cung cấp bởi NativeScript (tức là, nếu sử dụng plugin của bên thứ 3 không được cung cấp trực tiếp bởi các khung iOS), bạn có thể tạo các kiểu đánh máy cho bất kỳ plugin nào của bên thứ 3 đi kèm bằng cách chạy: thao TNS_TYPESCRIPT_DECLARATIONS_PATH="$(pwd)/typings" tns build iostác này sẽ tạo tất cả các tệp định nghĩa kiểu cho của bạn ứng dụng bên trong một typingsthư mục
  • Mặc dù điều này được triển khai hoàn toàn cho iOS, chúng tôi vẫn có thể xây dựng Android theo cách tương tự. Tuy nhiên, thực tế chúng tôi quay lại new android.widget.LinearLayout(this._context)trên Android sẽ đảm bảo rằng việc sử dụng thành phần này sẽ không làm ứng dụng của chúng tôi gặp sự cố khi thành phần được khởi chạy trên Android vì createNativeViewbắt buộc phải trả lại chế độ xem gốc. Nó sẽ chỉ hiển thị một LinearLayout trống do đó sẽ không hiển thị.

Chúc bạn vui vẻ khi tạo các chế độ xem gốc tùy chỉnh của riêng bạn!

Bạn có thể khám phá và chạy tất cả mã được đề cập trong bài viết này tại đây .

Nguồn: https://ultimatecourses.com/blog/custom-native-view-components-nativescript

#nativescript 

Professional NativeScript App Development Services in USA

Looking for the best NativeScript app development services in USA? We at AppClues Infotech offering the greatest and highly scalable NativeScripts app development services with the latest trends and technologies. Our professional app development team has highly experienced and innovative skills that help to develop a perfect application for your specific business requirements.

Share your requirement with us for reliable and best-in-class NativeScript app development services to build applications that deliver truly native user experience and performance.

Our NativeScript Development Services:
• Nativescript Web Development
• UI/UX Design for Mobile App
• Native Mobile App development
• Nativescript Plugin Development
• NativeScript Migration

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#professional nativescript app development services in usa #top nativescript app development company in usa #hire nativescript app developers #custom native script development services #how to create a nativescript application #how to create a nativescript application

CODE VN

CODE VN

1642752076

Cách tùy chỉnh các thành phần trong React-Bootstrap

Xây dựng ứng dụng bằng Bootstrap giúp bạn lặp lại nhanh chóng khi xây dựng các thành phần và thiết kế giao diện người dùng của ứng dụng của bạn. Điều này ngăn bạn sáng tạo lại bánh xe mỗi khi bạn bắt đầu một dự án mới. Tất cả những gì bạn cần làm là tùy chỉnh các thành phần cơ sở có sẵn để làm cho chúng phù hợp với nhu cầu của ứng dụng. Hướng dẫn này sẽ trình bày cách tùy chỉnh các thành phần react-bootstrap cho phù hợp với nhu cầu của bạn.

Thiết lập react-bootstrap

Để bắt đầu, hãy chạy lệnh sau trong thiết bị đầu cuối của bạn để thiết lập dự án React của bạn.

1. npx create-react-app <YOUR_APP_NAME>

2. cd <YOUR_APP_NAME>

3. yarn start or npm start

<YOUR_APP_NAME> đề cập đến tên bạn muốn đặt cho dự án React của mình.

Nếu bạn thực sự muốn bắt đầu nhanh chóng mà không phải thiết lập dự án tạo ứng dụng, hãy mở trình duyệt của bạn và truy cập https://react.new để có được môi trường phát triển React được cấu hình đầy đủ qua https://codeandbox. io .

Sử dụng Bootstrap

Bootstrap có thể được sử dụng theo một số cách khác nhau:

  1. Tải xuống tệp sản xuất Bootstrap
  2. Thêm liên kết CDN vào tệp HTML của bạn.
  3. Tải xuống thông qua trình quản lý gói như npm hoặc sợi.

Trong hướng dẫn này, bạn sẽ cài đặt Bootstrap bằng trình quản lý gói và cài đặt thư viện React Bootstrap, đi kèm với các thành phần React mà bạn có thể sử dụng dễ dàng.

Chạy lệnh sau để cài đặt react-bootstrap.

npm install react-bootstrap bootstrap

							OR

yarn add react-bootstrap bootstrap

React Bootstrap không sử dụng phiên bản Bootstrap chính xác, nhưng bạn sẽ cần thêm một số kiểu mặc định để sử dụng các thành phần. Thêm dòng mã sau vào tệp src/index.jshoặc của bạn.src/App.js

import 'bootstrap/dist/css/bootstrap.min.css'

Tùy chỉnh thành phần thẻ

Giả sử bạn đang xây dựng một ứng dụng thương mại điện tử, việc hiển thị danh sách sản phẩm sẽ yêu cầu một thành phần thẻ chứa thông tin chi tiết về sản phẩm. May mắn thay, có một thành phần thẻ có thể được xây dựng để cung cấp chức năng này một cách nhanh chóng.

Đầu tiên tạo thành phần thẻ sản phẩm.

import React from 'react';
import Card from 'react-bootstrap/Card';
import Button from 'react-bootstrap/Button';

function ProductCard({name, imgSrc, price,currency, ...props}){

	return(
	<Card style={{ width: '18rem' }}>
	  <Card.Img variant="top" src={imgSrc} />
  <Card.Body>
    <Card.Title>{name}</Card.Title>
    <Card.Text>
      {currency} {price}
    </Card.Text>
    <Button variant="success">Add to Cart</Button>
  </Card.Body>
</Card>
	)
}

export default ProductCard;

Trong <ProductCard/>thành phần trên, bạn đã xây dựng dựa trên thành phần thẻ mặc định trong react-bootstrap và tạo một thành phần tùy chỉnh.

Giả sử bạn đã tạo thành phần trong thư mục components/ProductCard.js, bạn có thể sử dụng thành phần tùy chỉnh của mình như hình dưới đây.

import React from 'react';
import ProductCard from './components/ProductCard';

function App(){
	return(
		<ProductCard name="Red Hoodie" price="90.00" currency="$" imgSrc="https://img.foo.com/logo.png"/>
	)
}
export default App;

Thành phần nút tùy chỉnh

Bây giờ, sử dụng quy trình tương tự bạn đã sử dụng để tạo thành phần thẻ, hãy tạo một nút tùy chỉnh chấp nhận một hrefthuộc tính như được hiển thị trong đoạn mã bên dưới.

import React from 'react';
import Card from 'react-bootstrap/Card';
import Button from 'react-bootstrap/Button';

function ButtonLink({text, link, ...props}){

	return(
				<Button href={link}>Link</Button> <Button type="submit">{text}</Button>
	)
}

export default ButtonLink;

Trong hướng dẫn này, bạn đã tạo một nút tùy chỉnh và thành phần thẻ để giúp bạn xây dựng ứng dụng của mình nhanh hơn.

CODE VN

CODE VN

1641138573

Hiểu các thành phần chức năng so với các thành phần lớp trong React

Trong thế giới của React, có hai cách để viết một thành phần React. Một cái sử dụng một hàm và cái kia sử dụng một lớp. Gần đây các thành phần chức năng ngày càng trở nên phổ biến, vậy tại sao lại như vậy?

Bài viết này sẽ giúp bạn hiểu sự khác biệt giữa các thành phần chức năng và lớp bằng cách xem qua từng thành phần với mã mẫu để bạn có thể đi sâu vào thế giới của React hiện đại!

Kết xuất JSX

Trước hết, sự khác biệt rõ ràng là cú pháp. Giống như trong tên của chúng, một thành phần chức năng chỉ là một hàm JavaScript đơn thuần trả về JSX. Thành phần lớp là một lớp JavaScript mở rộng React.Componentcó phương thức kết xuất. Một chút bối rối? Hãy xem xét một ví dụ đơn giản.

import React from "react";
 
const FunctionalComponent = () => {
 return <h1>Hello, world</h1>;
};

Như bạn có thể thấy, một thành phần chức năng là một hàm trả về JSX. Nếu bạn không quen thuộc với các hàm mũi tên được giới thiệu trong ES6, bạn cũng có thể xem ví dụ bên dưới mà không có.

import React from "react";

function FunctionalComponent() {
 return <h1>Hello, world</h1>;
}

Mặt khác, khi xác định một thành phần lớp, bạn phải tạo một lớp mở rộng React.Component. JSX để kết xuất sẽ được trả về bên trong phương thức kết xuất.

import React, { Component } from "react";

class ClassComponent extends Component {
 render() {
   return <h1>Hello, world</h1>;
 }
}

Dưới đây là ví dụ tương tự nhưng không sử dụng hàm hủy. Nếu bạn chưa quen với cấu trúc hủy, bạn có thể tìm hiểu thêm về cấu trúc hủy và các hàm mũi tên được giới thiệu trong ES6!

import React from "react";

class ClassComponent extends React.Component {
 render() {
   return <h1>Hello, world</h1>;
 }
}

Chuyền đạo cụ

Việc vượt qua các đạo cụ có thể gây nhầm lẫn, nhưng hãy xem chúng được viết như thế nào trong cả thành phần lớp và chức năng. Giả sử chúng tôi đang chuyển các đạo cụ có tên “Shiori” như bên dưới.

<Component name="Shiori" />
const FunctionalComponent = ({ name }) => {
 return <h1>Hello, {name}</h1>;
};

Bên trong một thành phần chức năng, chúng ta đang chuyển các đạo cụ làm đối số của hàm. Lưu ý rằng chúng tôi đang sử dụng cấu trúc hủy ở đây. Ngoài ra, chúng ta có thể viết nó mà không cần.

const FunctionalComponent = (props) => {
 return <h1>Hello, {props.name}</h1>;
};

Trong trường hợp này, bạn phải sử dụng props.namethay vì tên.

class ClassComponent extends React.Component {
  render() {
    const { name } = this.props;
    return <h1>Hello, { name }</h1>;
 }
}

Vì là lớp nên bạn cần dùng thisđể chỉ đạo cụ. Và tất nhiên, chúng ta có thể sử dụng hàm hủy để lấy các nameđạo cụ bên trong khi sử dụng các thành phần dựa trên lớp.

Xử lý trạng thái

Bây giờ chúng ta đều biết rằng chúng ta không thể tránh việc xử lý các biến trạng thái trong một dự án React. Việc xử lý trạng thái chỉ có thể thực hiện được trong một thành phần lớp cho đến gần đây, nhưng từ React 16.8, React Hook useState đã được giới thiệu để cho phép các nhà phát triển viết các thành phần chức năng trạng thái. Bạn có thể tìm hiểu thêm về Hooks từ tài liệu chính thức . Ở đây chúng ta sẽ tạo một bộ đếm đơn giản bắt đầu từ 0 và một cú nhấp chuột vào nút sẽ tăng số đếm lên 1.

Xử lý trạng thái trong các thành phần chức năng

const FunctionalComponent = () => {
 const [count, setCount] = React.useState(0);

 return (
   <div>
     <p>count: {count}</p>
     <button onClick={() => setCount(count + 1)}>Click</button>
   </div>
 );
};

Để sử dụng các biến trạng thái trong một thành phần chức năng, chúng ta cần sử dụng useStateHook, nó nhận một đối số là trạng thái ban đầu. Trong trường hợp này, chúng tôi bắt đầu với 0 nhấp chuột nên trạng thái ban đầu của số lượng sẽ là 0.

Tất nhiên bạn có thể có nhiều hơn về trạng thái ban đầu bao gồm null, stringhoặc thậm chí object- bất kỳ loại rằng JavaScript cho phép! Và ở phía bên trái, khi useStatetrả về trạng thái hiện tại và một hàm cập nhật nó, chúng tôi đang cấu trúc mảng như thế này. Nếu bạn hơi nhầm lẫn về hai phần tử của mảng, bạn có thể coi chúng như một trạng thái và bộ định hình của nó. Trong ví dụ này, chúng tôi đặt tên cho chúng countsetCountđể dễ hiểu mối liên hệ giữa chúng.

Xử lý trạng thái trong các thành phần lớp

class ClassComponent extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
 }

 render() {
   return (
     <div>
       <p>count: {this.state.count} times</p>
       <button onClick={() => this.setState({ count: this.state.count + 1 })}>
         Click
       </button>
     </div>
   );
 }
}

Ý tưởng vẫn giống nhau nhưng một thành phần lớp xử lý trạng thái hơi khác một chút. Đầu tiên, chúng ta cần hiểu tầm quan trọng của React.Componentconstructor. Đây là định nghĩa từ tài liệu chính thức :

Hàm tạo cho một thành phần React được gọi trước khi nó được gắn kết. Khi triển khai phương thức khởi tạo cho lớp con React.Component, bạn nên gọi super (props) trước bất kỳ câu lệnh nào khác. Nếu không, this.props sẽ không được xác định trong hàm tạo, điều này có thể dẫn đến lỗi.

Về cơ bản, nếu không triển khai hàm tạo và gọi siêu (đạo cụ), tất cả các biến trạng thái mà bạn đang cố gắng sử dụng sẽ không được xác định. Vì vậy, hãy xác định hàm tạo trước. Bên trong hàm tạo, bạn sẽ tạo một đối tượng trạng thái với khóa trạng thái và giá trị ban đầu. Và bên trong JSX, chúng tôi sử dụng this.state.countđể truy cập giá trị của khóa trạng thái mà chúng tôi đã xác định trong hàm tạo để hiển thị số lượng. Setter khá giống nhau, chỉ khác về cú pháp.

Ngoài ra, bạn có thể viết một onClickhàm. Hãy nhớ rằng, setStatehàm nhận (các) đối số về trạng thái, đạo cụ (tùy chọn) nếu cần.

onClick={() =>
  this.setState((state) => {
    return { count: state.count + 1 };
  })
}

Phương pháp vòng đời

Cuối cùng, hãy nói về vòng đời. Chờ đã, chúng ta sắp đến rồi! Như bạn đã biết, vòng đời đóng một vai trò quan trọng trong thời gian kết xuất. Đối với những người bạn đang di chuyển từ các thành phần lớp sang các thành phần chức năng, chắc hẳn bạn đang tự hỏi điều gì có thể thay thế các phương thức vòng đời chẳng hạn như componentDidMount()trong một thành phần lớp. Và vâng, có một cái móc hoạt động hoàn hảo cho mục đích đó, hãy cùng kiểm tra nhé!

Khi gắn (componentDidMount)

Phương thức vòng đời componentDidMountđược gọi ngay sau khi kết xuất đầu tiên hoàn thành. Đã từng có một componentWillMountđiều xảy ra trước lần hiển thị đầu tiên, nhưng nó được coi là kế thừa và không được khuyến khích sử dụng trong các phiên bản React mới hơn.

const FunctionalComponent = () => {
 React.useEffect(() => {
   console.log("Hello");
 }, []);
 return <h1>Hello, World</h1>;
};

Thay thế componentDidMount, Chúng tôi sử dụng useEffecthook với đối số thứ hai là []. Đối số thứ hai của useStatehook thường là một mảng của (các) trạng thái thay đổi và useEffectsẽ chỉ được gọi trên những thay đổi đã chọn này. Nhưng khi đó là một mảng trống như ví dụ này, nó sẽ được gọi một lần khi gắn. Đây là một sự thay thế hoàn hảo cho một componentDidMount.

class ClassComponent extends React.Component {
 componentDidMount() {
   console.log("Hello");
 }

 render() {
   return <h1>Hello, World</h1>;
 }
}

Về cơ bản, điều tương tự cũng xảy ra ở đây: componentDidMountlà một phương thức vòng đời được gọi một lần sau lần kết xuất đầu tiên.

Khi giải phóng (componentWillUnmount)

const FunctionalComponent = () => {
 React.useEffect(() => {
   return () => {
     console.log("Bye");
   };
 }, []);
 return <h1>Bye, World</h1>;
};

Tôi rất vui khi nói với bạn rằng chúng tôi cũng có thể sử dụng useStatemóc để tháo lắp. Nhưng hãy cẩn thận, cú pháp hơi khác một chút. Những gì bạn cần làm là trả về một hàm đang chạy khi ngắt kết nối bên trong useEffecthàm. Điều này đặc biệt hữu ích khi bạn phải xóa các đăng ký như một clearIntervalhàm, nếu không nó có thể gây ra tình trạng rò rỉ bộ nhớ nghiêm trọng trong một dự án lớn hơn. Một lợi thế của việc sử dụng useEffectlà chúng ta có thể viết các hàm cho cả việc gắn và tháo ở cùng một nơi.

class ClassComponent extends React.Component {
 componentWillUnmount() {
   console.log("Bye");
 }

 render() {
   return <h1>Bye, World</h1>;
 }

Kết Luận

Có những ưu và khuyết điểm trong cả hai phong cách nhưng tôi muốn kết luận rằng các thành phần chức năng đang tiếp quản React hiện đại trong tương lai gần.

Như chúng ta đã nhận thấy trong các ví dụ, một thành phần chức năng được viết ngắn hơn và đơn giản hơn, giúp dễ dàng phát triển, hiểu và kiểm tra hơn. Các thành phần lớp cũng có thể gây nhầm lẫn với rất nhiều cách sử dụng this. Sử dụng các thành phần chức năng có thể dễ dàng tránh được loại lộn xộn này và giữ mọi thứ sạch sẽ.

Duong Tran

Duong Tran

1660392000

Tạo Các Thành Phần Phản Ứng Thích Ứng Với React Textfit

Phát triển trong React liên quan đến việc xác định các thành phần có thể tái sử dụng và lắp ráp chúng thành các phần khác nhau của ứng dụng của bạn để đạt được giao diện người dùng (UI) mong muốn của bạn. Trong bài viết này, chúng ta sẽ xem xét react-textfitthư viện, giúp dễ dàng tạo các thành phần React đáp ứng hiển thị có thể đoán trước được ở bất cứ đâu chúng xuất hiện trong một bố cục.

Vấn đề về khớp văn bản

Vì các thành phần React là các đoạn mã JavaScript mô tả một phần cụ thể trong giao diện người dùng của bạn, chúng hầu như độc lập với nhau. Và phong cách hình ảnh của họ thường được gắn vào bên trong chúng, như một phần định nghĩa của chúng. Điều này có thể khá hữu ích, vì chúng có thể được sử dụng ở các vị trí và bố cục khác nhau.

Nhưng cũng có một số nhược điểm đối với việc nhúng các kiểu trong một thành phần có thể tái sử dụng. Một ví dụ được thấy trong trường hợp đáp ứng. Giả sử bạn muốn một dòng văn bản - chẳng hạn như một tiêu đề - lấp đầy hoàn toàn không gian dành riêng cho nó về chiều cao và chiều rộng, nhưng không được bao bọc - tất cả mà không cần phải viết các quy tắc CSS tùy chỉnh cho mọi trường hợp có thể xảy ra. (Ví dụ về nơi bạn có thể muốn điều này bao gồm khẩu hiệu kinh doanh, thông điệp quảng cáo hoặc văn bản được nhúng trong các thành phần của thanh điều hướng.)

Các thành phần React đáp ứng: mỗi thành phần bạn tạo có thể có nhiều hơn một chức năng

CSS và tính di động

Trong khi xác định kiểu của thành phần React đáp ứng của bạn, bạn muốn tính đến kích thước, bố cục hoặc phong cách của từng thành phần mẹ có thể có thể bao bọc nó để điều chỉnh kích thước phông chữ cho phù hợp. Như bạn có thể tưởng tượng, việc tính đến mọi kích thước vùng chứa có thể có là không thực sự khả thi - ngay cả khi bạn có thể làm điều đó với CSS. Bạn sẽ phải theo đuổi quá nhiều kịch bản chế độ xem khiến việc viết truy vấn phương tiện trở nên thực tế. Nhưng ngoài các truy vấn phương tiện, thực sự không có cách nào trong CSS để đảm bảo rằng một khối văn bản sẽ luôn nằm gọn trong một dòng.

Tạo các thành phần React có thể tái sử dụng

Rất may, một số thư viện React có thể được sử dụng để giải quyết vấn đề này một cách dễ dàng. Chúng cho phép bạn xác định các thành phần React có thể tái sử dụng trong đó văn bản hoạt động như mong đợi bất kể vùng chứa mà thành phần có thể sử dụng lại được đặt trong một thành phần có thể tái sử dụng. Vì vậy, hãy xem xét mọi thứ bạn nên biết để làm cho văn bản của bạn tự động phù hợp với không gian có sẵn trong React.

Đầu tiên, chúng ta sẽ xem lý do tại sao đối mặt với một vấn đề như vậy lại quan trọng và tại sao các giải pháp thông thường lại không đủ, đặc biệt là khi sử dụng React. Sau đó, react-textfitthư viện React sẽ được trình bày và sử dụng để triển khai một giải pháp cho cả văn bản đơn và văn bản nhiều dòng.

Các thành phần React đáp ứng: mỗi thành phần bạn tạo sẽ thuộc tính cho các môi trường khác nhau

Vấn đề khớp văn bản trong các thành phần có thể tái sử dụng

Hãy xem bản demo sau giải thích vấn đề phù hợp văn bản với một ví dụ.

https://codepen.io/SitePoint/pen/KKqOxQV

Mục đích là làm cho dòng tiêu đề phù hợp với không gian dành riêng cho nó, bất kể kích thước màn hình của người dùng. Trong ví dụ này, đơn vị khung nhìn được sử dụng để xác định font-sizetiêu đề. Do đó, trong khi thay đổi kích thước đường viền màu đỏ iframeđại diện cho màn hình của người dùng, dòng tiêu đề sẽ luôn vừa với dòng chính của nó <div>. Vì vậy, phương pháp này chắc chắn cho phép văn bản tiêu đề thích ứng với bất kỳ chiều rộng màn hình nào. Tuy nhiên, Headlinethành phần được tạo kiểu không thể sử dụng lại được. Điều này là do nó được thiết kế chỉ với văn bản cụ thể này. Bằng cách thêm vào văn bản dòng tiêu đề hoặc thay đổi kích thước gốc <div>, văn bản sẽ không còn vừa trên một dòng. (Bạn có thể thử nghiệm với việc thay đổi văn bản trong bản demo.) Chúng tôi thực sự muốn một thành phần có thể tái sử dụng có thể thích ứng hơn thế này.

Như đã đề cập, một giải pháp khác được cung cấp bởi truy vấn phương tiện CSS , cho phép bạn điều chỉnh kích thước phông chữ văn bản của mình theo kích thước màn hình. Đây là giải pháp lý tưởng khi xem xét toàn bộ trang web. Nhưng không thực tế nếu theo đuổi vô số chiều rộng vùng chứa có thể có bằng các truy vấn phương tiện. Điều này sẽ dẫn đến rất nhiều công việc. Thêm vào đó, và sẽ làm cho các thành phần của bạn ít di động hơn rất nhiều.

react-textfitnhư một giải pháp cho văn bản phản ứng thích ứng

Vì vậy, hãy xem cách react-textfitthư viện React làm cho nó có thể tự động điều chỉnh văn bản trong không gian có sẵn, thực sự làm cho thành phần có thể tái sử dụng.

https://codepen.io/SitePoint/pen/BaZXOGa

Như bạn có thể thấy, các vấn đề nói trên đều có. Nhờ đó react-textfit, giờ đây bạn có thể thay đổi dòng tiêu đề hoặc thay đổi kích thước dòng chính <div>, trong khi vẫn giữ cho dòng tiêu đề của bạn vừa khít với không gian có sẵn.

Làm thế nào Textfithoạt động

Bây giờ, chúng ta hãy xem chi tiết cách react-textfithoạt động.

Như đã nêu trong trang GitHub chính thức của dự án , react-textfitlà một thư viện để điều chỉnh các tiêu đề và đoạn văn trong bất kỳ thành phần có thể tái sử dụng nào. Nó tìm thấy sự phù hợp chính xác một cách hiệu quả và hoạt động với bất kỳ cấu hình kiểu CSS nào, chẳng hạn như padding, line-heightv.v.

Bạn có thể thêm nó vào phần phụ thuộc của mình bằng cách khởi chạy lệnh sau:

npm install react-textfit --save

Sau đó, bạn sẽ có thể truy cập Textfitthành phần để phù hợp với bất kỳ văn bản nào, như sau:

import { Textfit } from 'react-textfit';

Textfitsẽ được dịch sang một <div>phần tử HTML và cho phép bạn khớp cả văn bản một dòng và nhiều dòng trong bất kỳ thành phần hoặc phần tử HTML nào có thể tái sử dụng.

Để sử dụng nó, bạn chỉ làm cho nó bao bọc văn bản, như sau:

<Textfit>
  Sample text
</Textfit>

Hoặc bất kỳ phần tử HTML nào có chứa, như sau:

<Textfit>
  <span>Sample text</span>
</Textfit>

Textfitlà một <div>, bạn có thể chuyển các quy tắc CSS cho nó thông qua React styleprop, như sau:

<Textfit
  style={{"width": "200px"}}
>
  Sample text
</Textfit>

Hoặc bằng cách gán nó cho một lớp CSS thông qua className, như sau:

<Textfit
  className={"divWidth200"}
>
  Sample text
</Textfit>

Đạo cụ Textfit

Textfitcũng đi kèm với một số đạo cụ có thể được sử dụng để phù hợp với văn bản của bạn như mong muốn. Hãy cùng xem tất cả:

  • modelà một chuỗi có thể giả sử hai giá trị: singlehoặc multi. Nó xác định phương thức được sử dụng bởi thành phần để phù hợp với văn bản. Chế singleđộ nên được sử dụng cho tiêu đề và multichế độ cho đoạn văn. Giá trị mặc định là multi.
  • minlà số đại diện cho kích thước phông chữ tối thiểu mà văn bản được phép đạt tới tính bằng pixel. Giá trị mặc định là 1.
  • maxlà số đại diện cho kích thước phông chữ tối đa mà văn bản được phép đạt tới tính bằng pixel. Giá trị mặc định là 100.
  • forceSingleModeWidthlà một Boolean chỉ được sử dụng trong singlechế độ để làm cho Textfitthành phần hoàn toàn bỏ qua chiều cao của phần tử. Giá trị mặc định là true.
  • throttlelà một số đại diện cho van tiết lưu thay đổi kích thước cửa sổ tính bằng mili giây. Giá trị mặc định là 50.
  • onReadylà một hàm được gọi bất cứ khi nào văn bản phù hợp.

Hai trong số những cái quan trọng nhất là minmax, cho phép bạn đặt giới hạn dưới và giới hạn trên về kích thước phông chữ tương ứng. Sau đó, có phần modehỗ trợ, xác định cách Textfitthành phần sẽ hoạt động. Điều này đòi hỏi một lời giải thích chi tiết hơn. Vì vậy, chúng ta hãy xem cả hai chế độ hoạt động.

Cách điều chỉnh văn bản một dòng trong các thành phần có thể tái sử dụng

Văn bản một dòng được thể hiện bằng dòng tiêu đề, tiêu đề và nhãn. Nó thường được chứa trong <h1>, hoặc <h2>nói <h3>chung hơn <p><span>các phần tử HTML. Khi xử lý văn bản một dòng, vấn đề phù hợp gần như không thể tránh khỏi. Điều này là do kích thước phông chữ của nó có xu hướng lớn hơn nhiều so với kích thước được sử dụng trong các đoạn văn. Khi singlechế độ được kích hoạt bởi phần mềm modehỗ trợ nói trên Textfit, thuật toán sau đây liên quan đến một bước bắt buộc và một bước tùy chọn sẽ được áp dụng:

1. binary search to fit the element's width
2. if forceSingleModeWidth=false and text overflows height
    2a. binary search to also fit the element's height

Như đã giải thích ở đây, thuật toán tìm kiếm nhị phân được sử dụng để truy xuất kích thước phông chữ phù hợp để làm cho văn bản chứa trong Textfitthành phần phù hợp với chiều rộng của nó. Sau đó, nếu forceSingleModeWidthđược đặt thành false, cách tiếp cận tương tự được sử dụng - nhưng cũng tính đến chiều cao của phần tử.

Làm cho một thành phần React có thể tái sử dụng: một bản trình diễn một dòng

Bây giờ, chúng ta hãy xem chế độ Textfit singlehoạt động thông qua một bản demo trực tiếp:

https://codepen.io/SitePoint/pen/ExXqeJQ

Như bạn có thể thấy, bằng cách làm cho văn bản của bạn dài hơn, kích thước phông chữ của nó sẽ được cập nhật tương ứng Textfitđể làm cho nó phù hợp với kích thước của nó. Logic chính xác tương tự được áp dụng khi thay đổi kích thước hộp văn bản trong khi vẫn duy trì hằng số văn bản. Đây là những gì sẽ xảy ra với màn hình nhỏ hơn. Vì vậy, Textfitđại diện cho giải pháp hoàn hảo để làm cho tiêu đề và tiêu đề đáp ứng trong bất kỳ thành phần React hoặc phần tử HTML nào.

Cách điều chỉnh văn bản nhiều dòng trong các thành phần phản ứng thích ứng

Văn bản nhiều dòng được thể hiện bằng các đoạn văn, phụ đề và mô tả. Nó thường được chứa trong <p>, <em>hoặc <div>các phần tử HTML. Vấn đề phù hợp với văn bản nhiều dòng thường xảy ra về chiều cao. Trên thực tế, khi xử lý các màn hình nhỏ hơn, văn bản của bạn sẽ trở nên cao hơn vì giảm chiều rộng có sẵn. Do đó, điều này có thể làm cho văn bản của bạn vượt quá thẻ hoặc phần có chiều cao cố định.

Khi multichế độ được kích hoạt trong Textfit, thuật toán sau bao gồm hai bước bắt buộc sẽ được áp dụng:

1. binary search to fit the element's height
2. if text overflows width
    2a. binary search to also fit the element's width

Thuật toán tìm kiếm nhị phân được sử dụng để truy xuất kích thước phông chữ phù hợp để làm cho văn bản chứa trong Textfitthành phần phù hợp với chiều cao của nó. Sau đó, cách tiếp cận tương tự được sử dụng, nhưng cũng tính đến chiều rộng của phần tử. Như bạn có thể thấy, trái ngược với những gì xảy ra trong singlechế độ, chiều cao được ưu tiên hơn chiều rộng. Điều này được giải thích bởi lý do đã trình bày ở trên.

Làm cho một thành phần React có thể tái sử dụng: một bản trình diễn nhiều dòng

Bây giờ, chúng ta hãy xem chế độ Textfit multihoạt động thông qua một bản demo trực tiếp:

https://codepen.io/SitePoint/pen/ExXqeJQ

Bằng cách tương tác với bản trình diễn trực tiếp và làm cho văn bản nhiều dòng của bạn dài hơn, kích thước phông chữ của nó sẽ được cập nhật để làm cho văn bản phù hợp với kích thước phần tử HTML. Điều tương tự cũng xảy ra khi thay đổi kích thước Textfitthành phần trong khi vẫn giữ nguyên văn bản. Đây là những gì sẽ xảy ra với màn hình nhỏ hơn. Vì vậy, Textfitlà một giải pháp tốt để làm cho các đoạn văn và mô tả dài đáp ứng trong bất kỳ phần tử HTML hoặc thành phần React nào.

Các thành phần React đáp ứng: các thành phần sẽ được trình bày với nhiều kích thước div khác nhau

Sự kết luận

Kể từ khi điện thoại thông minh và máy tính bảng trở thành những thiết bị được sử dụng rộng rãi nhất được sử dụng để truy cập Web, khả năng phản hồi đã trở thành một vấn đề không thể coi thường được nữa. Trong bài viết này, chúng tôi đã xem xét một vấn đề cụ thể trong miền này. Đặc biệt, chúng tôi đã khám phá một vấn đề cụ thể về khớp văn bản, tại sao nó lại quan trọng để giải quyết và cách thực hiện nó trong React.

Thư react-textfitviện là một thư viện React hữu ích, mã nguồn mở, hiệu quả cho phép bạn dễ dàng tạo văn bản của mình - cả một dòng và nhiều dòng - phù hợp với bất kỳ thành phần React nào một cách dễ dàng. Tôi hy vọng bạn tìm thấy lời giải thích và bản trình diễn hữu ích. Cảm ơn vì đã đọc! Vui lòng liên hệ với tôi nếu có bất kỳ câu hỏi, nhận xét hoặc đề xuất nào.

 Nguồn: https://www.sitepoint.com/responsive-react-components-textfit/

#react