New Components (update 19/02/2023) by Tuan

[NguyenAnhTuan1912]

Một số components mới có trong master

Những components này là những compoents mà cả nhóm sẽ dùng chung.

Table of contents

• MyHeader - Xem ví dụ
• List Properties
• OrderedList - Xem ví dụ
• UnorderedList - Xem ví dụ

MyHeader

Đây sẽ là phần header của screen, mỗi screen sẽ có một header khác nhau, tuy nhiên thì cấu trúc cơ bản của nó là giống nhau. Header sẽ được chia làm 3 phần, phần trái, giữa và phải. Header mặc định sẽ có một nút để back và một nút tìm kiếm.

Properties

boxShadowType

Default value: ""
Thuộc tính này dùng để đổ bóng cho header. Có các value như là 'type_1' | 'type_2' | 'type_3' | 'type_4' | 'type_5'

screenName

Default value: undefined
Thuộc này này dùng để điền tên cho screen. Ví dụ như mình có screen là HomeScreen, đầu tiên component này sẽ check xem thuộc tính này có được set hay chưa? Nếu chưa thì nó sẽ lấy từ trong options (chi tiết phía dưới) hoặc nó sẽ check thuộc tính route và tim name của screen này (bời vì một screen sẽ là một route name).

marginBottom -

Thuộc tính này dùng để set margin bottom cho header, tuy nhiên nó không hoạt động như mong muốn, cho nên tạm thời thì thuộc tính này không dùng nữa.

setLeftPart

Default value: undefined
Thuộc tính này là một function (callback) dùng để set up phần bên trái cho header. Thường phần bên trái sẽ là back button hoặc là logo. Header sẽ check xem là thuộc tính này có xác định hay không? Và nó có phải là một function hay không? (Không check tính hợp lệ của React cho function này, nghĩa là nó không nhất thiết là function trả về một Jsx element). Khi thuộc tính này undefined thì header sẽ tự động thêm vào phần bên phải này một cái back button.

setCenterPart

Default value: undefined
Thuộc tính này cũng là một function dùng để set up phần giữa của header. Thường phần giữa của header sẽ là tên của screen (title) hoặc là bất cứ thứ gì mà người dùng truyền vào cho screenName hoặc thuộc tính title của options. Nếu như thuộc tính này là undefined thì header sẽ tự tạo ra phần giữa là hiển thị tên screen, chi tiết sẽ nói ở phía dưới.

setRightPart

Default value: undefined
Thuộc tính này cũng tương tự, là một function đưng để set up phần bên phải của header. Thường thì phần bên phải của header là nút tím kiếm. Nếu như thuộc tính này là undefined thì header sẽ tự tạo ra phần bên phải có search button.

Third-Party Properties

Đây là các properties được truyền component của một hay vào library bên thứ 3.

back -

Thuộc tính này check xem có thể back về hay không? Tuy nhiên cách sử dụng thực tế lại không nhưng hướng dẫn và đã có cách check khác. Cho nên tạm thời thì thuộc tính này không dùng nữa.

navigation

Thuộc tính này là một object bao gồm các methods và properties để phục vụ cho việc navigate trong app, hoặc ít nhất là trong navigator hiện tại. Xem thêm tại Navigation props in React Navigation

route

Thuộc tính này cho biết các thông tin quan trong về route khi set up như là key, name, params, path. Xem thêm tại Route props in React Navigation

options

Thuộc tính này cho biết các options của người dùng về một screen cụ thể nào đó. Xem thêm tại Route props in React Navigation

Example

Giả sử hiện tại React Navigation đang render ExploreNavigation stack, trong đó có ExploreScreen làm root screen là screen được khởi tạo khi navigate tới stack này. Một screen khác cũng ở trong stack là PlaceDetailScreen. Xem đoạn code bên dưới:

<ExploreStack.Navigator>
  {/* Cài đặt screen Explore */}
  <ExploreStack.Screen>
    {/* Thuộc tính children của Screen sẽ nhận một function (có argument là route, options, navigation props) hoặc một jsx element */}
    {props => <ExploreScreen {...props} />}
  </ExploreStack.Screen>

  {/* Cài đặt screen Place Detail */}
  <ExploreStack.Screen>
    {/* Thuộc tính children của Screen sẽ nhận một function (có argument là route, options, navigation props) hoặc một jsx element */}
    {props => <PlaceDetailScreen {...props} />}
  </ExploreStack.Screen>
</ExploreStack.Navigator>

Như đã biết thì chúng ta có 2 lựa chọn, một là cài header cho từng screen; hai là cài header cho tất cả các screen trong stack trong thuộc tính screenOptions của Navigator. Giờ sẽ cài initialRouteName cho stack và set up Header cho mọi screen.

{/* Explore Stack Navigator */}
<ExploreStack.Navigator
  initialRouteName='ExploreScreen'

  {/* Set up header, cùng là một function có các arguments là route, options, navigation props */}
  screenOptions={{
    header: props => (<MyHeader {...props} />),
  }}
>
  <ExploreStack.Screen>
    {props => <ExploreScreen {...props} />}
  </ExploreStack.Screen>

  <ExploreStack.Screen>
    {props => <PlaceDetailScreen {...props} />}
  </ExploreStack.Screen>
</ExploreStack.Navigator>

Lúc này thi header coi như set up gần như là đầy đủ, tiếp tục set up. Lúc này trên Header đã có đủ 3 phần, tuy nhiên hiện tại vẫn đang là ở root screen, cho nên nút back không được tồi tại ở root screen, nó chỉ có một mục đích duy nhất là quay trở lại các screen trước đó và đến root screen thì không thể trở về được nữa. Cho nên chúng ta cần phải set up thêm một thuộc tính trong options của screen mà mình cần thuộc tính isTopScreen = true. Hiện tại thì kiểu này hơi bất tiện và không hay, sau này sẽ đổi lại hoặc thêm vào việc check initialRouteName của Stack. Tiếp theo set up root screen là name cho mỗi screen

<ExploreStack.Navigator
  initialRouteName='ExploreScreen'
  screenOptions={{
    header: props => (<MyHeader {...props} />),
  }}
>
  {/* Dựa theo initialRouteName, thì mình sẽ phải set root cho thg này */}
  <ExploreStack.Screen
    name='ExploreScreen'
    options={{
      isTopScreen: true
    }}
  >
    {props => <ExploreScreen {...props} />}
  </ExploreStack.Screen>

  <ExploreStack.Screen
    name='PlaceDetailScreen'
  >
    {props => <PlaceDetailScreen {...props} />}
  </ExploreStack.Screen>
</ExploreStack.Navigator>

Ok, bây giờ thì header đã hiển thị đúng rồi, tuy nhiên thì title của nó vẫn chưa được (phần giữa), thì lúc này chỉ cần thêm tên screen mà mình muốn vào thuộc tính title của options. Thì nó sẽ tự động hiển thị đúng thôi. Nếu như muốn screen đó không hiện header thì chỉ cần việc set thuộc tính header của options là một function () => null là được.

Ngoài ra, nếu như muốn screen chỉ có title và nút tìm kiếm. có nghĩa là header chỉ còn có 2 phần.

<MyHeader
  setLeftPart={() => null}
  {...props}
/>

Hoặc nếu như muốn thay thế phần title của header thì

<MyHeader
  setCenterPart={() => <MyCustomCenterPartOfHeader />}
  {...props}
/>

Lưu ý thì function này hiện tại vẫn chưa hỗ trợ style tự động cho function này. Cho nên khi muốn thay cái gì đó thì cần phải viết thêm style cho component này.

Cuối cùng là, nếu như muốn header có opacity thì chỉ cần set thuộc tính headerTransparent của options trong screen đó là true là được. Thì tự động Navigator sẽ ẩn đi background của header mặc định (đối với header mặc định của React Navigation), nếu như có custom header thì Navigators cũng sẽ ẩn đi background của header mặc định, đồng thời custom header cũng sẽ ẩn đi background của chính nó. Dưới đây sẽ set transparent cho header của Place Detail

<ExploreStack.Navigator
  initialRouteName='ExploreScreen'
  screenOptions={{
    header: props => (<MyHeader {...props} />),
  }}
>
  <ExploreStack.Screen
    name='ExploreScreen'
    options={{
      title: 'Explore'
      isTopScreen: true
    }}
  >
    {props => <ExploreScreen {...props} />}
  </ExploreStack.Screen>

  {/* Set true cho thuộc tính headerTransparent của options của screen PlaceDetailScreen */}
  <ExploreStack.Screen
    name='PlaceDetailScreen'
    options={{
      title: 'Place Detail',
      headerTransparent: true,
    }}
  >
    {props => <PlaceDetailScreen {...props} />}
  </ExploreStack.Screen>
</ExploreStack.Navigator>

Một số props còn lại thì dễ thôi cho nên sẽ không có hướng dẫn,

List Properties

Đây là các properties dùng chung của List. Trong app sẽ có 2 loại list, một là ordered list (danh sách đã được sắp xếp), bullet là số thứ tự hoặc là chữ cái; hai là unordered list (danh sách chưa được sắp xếp), bullet là các kí tự như dấu chấm giữa, dấu gạnh ngang.

List này có hỗ trợ phân cấp cho list, mỗi cấp sẽ có các index khac nhau và được lặp lại khi hết bullet list mặc định hoặc bullet list custom.

Để phân cấp được list thì chỉ cần bỏ một list cũng loại vào trong một list khác (children), thì list sẽ tự tính toán level.

Properties

children

Thuộc tính này nhận vào một hoặc nhiều list cũng loại.

data

Default value: []
Thuộc tính này nhận vào một mảng chuỗi là danh sách mà chúng ta cần in.

level

Default value: 0
Thuộc tính này dùng để set level cho list, từ đó suy ra được bullet mà level đó cần.

fontStyle

Default value: normal
Thuộc tính này dùng để set font style cho toàn bộ list. Có các value như 'normal' | 'italic'

weight

Default value: normal
Thuộc tính này dùng để set độ đậm cho chữ cho toàn bộ list. Có các value như 'normal' | 'lighter' | 'bolder'

font

Default value: body3
Thuộc tính này dùng để set font chữ cho toàn bộ list, Có các value như 'h0' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'body0' | 'body1' | 'body2' | 'body3' | 'sub0' | 'sub1'. Xem thêm trong file typography.js.

color

Default value: fourth
Thuộc tính này dùng để set màu cho toàn bộ list. Có các value như 'primary' | 'second' | 'third' | 'fourth' | 'sub_primary' | 'sub_second' | 'sub_third' | 'sub_fourth' | 'ext_primary' | 'ext_second' | 'ext_third'. Xem thêm trong file color.js

style

Default value: {}
Thuộc tính này dùng để set custom style cho list. Hiện tại thì list chỉ có một thuộc tính là canh lề trái 12.

OrderedList

Lưu ý: component này hiện trong đang quá trình thử nghiệm, cho nên sẽ có nhiều lỗi nghiêm trọng
Đây là component sẽ in ra một danh sách có thứ từ như là 1. 2. 3. 4. rồi a. b. c. d. e. f. ... Các bullet này là các alphanumeric (chữ và số). Khi chữ lặp hết thì nó sẽ trở lại về ban đầu 1.a. ... 26.z. -> 27.a. ... 52.z. Ngoài ra thì các list này còn có level, mỗi level sẽ có mỗi (vòng) bullet, ở mặc định thì level 0 sẽ là số, level 1 sẽ là chữ, đến level 3 thì sẽ lại là số và level 4 sẽ lại là chữ. Nó sẽ lặp đi lặp lại như thế.

Properties

customOrderBullets

Một list dùng để đánh dấu bulllet tự động, là một mảng 2 chiều, mỗi mảng con sẽ bao gồm các phần tử được sắp xếp như là [['A', 'B', 'C', 'D', 'E'] , ['a', 'b', 'c', 'd', 'e']].

Example

Nói chung thì component này vẫn chưa tốt cho lắm. Như ví dụ ở dưới, nếu như chúng ta cần dùng tới custom bullet thì cần phải truyền cho mọi component chứ nó không kế thừa từ parent.

const data = ['list', 'co', 'thu', 'tu'];
// Ở level 0 sẽ để null là vì mình sẽ cần nó sắp xếp theo số, level 1 là chữ, tương tự với các level tiếp theo
const customOrderBullets = [null, UPPERCASE_ALPHABET];

<OrderedList data={data} customOrderBullets={customOrderBullets}>
  <OrderedList data={data} customOrderBullets={customOrderBullets} />
  <OrderedList data={data} customOrderBullets={customOrderBullets}>
    <OrderedList data={data} customOrderBullets={customOrderBullets} />
  </OrderedList>
</OrderedList>

Out put nó sẽ ra như này

1. list
2. co
3. thu
4. tu
  A. list
  B. co
  C. thu
  D. tu
  E. list
  F. co
  G. thu
  H. tu
    1. list
    2. co
    3. thu
    4. tu

UnorderedList

Lưu ý: component này hiện trong đang quá trình thử nghiệm, cho nên sẽ có nhiều lỗi nghiêm trọng
Tương tự như OrderedList, thì UnorderedList cũng sẽ in ra một danh sách có bullet, tuy nhiên bullet của unordered list không có thứ tự, chỉ là một kí tự. Điều giống là mỗi khi số level vượi quá số bullet được cấp cho list thì nó sẽ quay về lại bullet đầu tiên trong mảng.

Properties

customBullets

Khác với bullet của ordered list, thì bullet của unordered list là mảng một chiều bao gồm các bullet được xếp theo level, ['-', '+'] thì level 0 sẽ là - và level 1 sẽ là '+', tương tự như vậy với các level còn lại.

Example

Đây là một component khá hoàn chỉnh về việc đánh bullet cho các item, xem ví dụ bên dưới

const data = ['list', 'khong', 'thu', 'tu'];

<UnorderedList data={data} customOrderBullets={customOrderBullets}>
  <UnorderedList data={data} customOrderBullets={customOrderBullets} />
  <UnorderedList data={data} customOrderBullets={customOrderBullets}>
    <UnorderedList data={data} customOrderBullets={customOrderBullets} />
  </UnorderedList>
  <UnorderedList data={data} customOrderBullets={customOrderBullets} />
</UnorderedList>

Output

• list
• khong
• thu
• tu
  -list
  -khong
  -thu
  -tu
  -list
  -khong
  -thu
  -tu
    • list
    • khong
    • thu
    • tu
  -list
  -khong
  -thu
  -tu

[NguyenAnhTuan1912]

Một số thứ về Typography

Những thay đổi mới đã tận dụng được hết font chữ đã được cài đặt.

Ý tưởng

Một số tính chất của chữ như là kiểu chữ (in nghiêng, thường), độ đậm, nhạt (thường, nhạt hơn, đậm hơn), kích thước (được chia thành nhiều thuộc tính khác). Chúng ta sẽ lấy kiểu chữ làm tiêu chuẩn, vì không thể lấy kích thước hay độ đậm nhạt làm tiêu chuẩn như ban đầu được (mà còn thiều nữa), dựa theo bộ font hiện có thì nó cũng có 2 kiểu là thường và nghiêng => Cho nên sẽ hợp lý cho việc chia font nói chung ra làm 2 kiểu theo kiểu chữ.

Với mỗi kiểu chữ, thì chúng ta sẽ có độ đậm nhạt khác nhau, kích thước khác nhau. Nói chung cũng khá tiện rồi. Còn lại thì sẽ trong file typography.js