Cấu hình các page

Nhà Phát Triển có thể cấu hình các page thông qua 2 lựa chọn.

• file page.json: chứa các cấu hình liên quan tới navigator header
• file index.js: chứa các cấu hình nâng cao hơn liên quan tới navigation mà không thể tuỳ chỉnh bằng page.json

File page.json

Mỗi một page trong Mini App, đều có thể cấu hình các thông tin liên quan tới page đó thông qua file page.json trong từng pages

Ví dụ, ứng dụng Thanh Toán Hoá Đơn, có một pages được đặt tên là OrderHistory. Nhà Phát Triển sẽ khai báo trong file manifest.json nội dung như sau

{

...

"pages": ["./pages/OrderHistory"],

}

Và trong thư mục pages/OrderHistory, Nhà Phát Triển sẽ tạo ra 2 files

my-app/

pages/

OrderHistory/

index.js

page.json

Nhà Phát Triển sẽ cấu hình các thông tin liên quan tới page, thông qua việc thay đổi nội dung của file page.json File page.json là một file JSON chứa các key sau

tên trường	kiểu dữ liệu	ý nghĩa
navigationBarBackgroundColor	string	màu background của navigation bar
navigationBarTitleColor	string	màu chữ của title
navigationBarTitleText	string	nội dung của title trên navigation bar
navigationBarTitleAlign	string	kiểu align layout của title

File index.js

Trong trường hợp Nhà Phát Triển cần những cấu hình chi tiết hơn của navigation bar, Nhà Phát Triển có thể khái báo chúng thông qua thuộc tính navOptions của file index.js

Cụ thể, với page OrderHistory, chúng ta có thể định nghĩa file index.js như sau

import * as React from "react";

import { View, Text, StyleSheet } from "tbox/ui";

export default function Page() {

return (

<View style={styles.content}>

<Text style={styles.paragraph}>This is sample content for page 1</Text>

</View>

);

}

Page.navOptions = {

headerTitle: "wow",

};

const styles = StyleSheet.create({

content: {

flex: 1,

paddingVertical: 16,

},

paragraph: {

fontSize: 16,

lineHeight: 24,

marginVertical: 8,

marginHorizontal: 16,

},

});

Chi tiết về thuộc tính của navOptions, có thể xem tại đây

Trong trường hợp Nhà Phát Triển cần những thay đổi nâng cao hơn, Nhà Phát Triển có thể sửa trực tiếp file App.js trong thư mục framework được sinh ra bởi tbox. Tuy nhiên, việc thay đổi này chỉ có thể áp dụng với các ứng dụng được phát triển bởi bởi Tiki mà thôi Việc sửa file App.js có thể sẽ không thể thực hiện được trong các version tiếp theo của Tbox Mini App