Câu hỏi: MMA301 Phát triển ứng dụng di động đa nền tảng – Bộ ôn tập cuối kỳ số 1

Đáp án đúng gồm hai ý: "Every core component in React Native can receive the style prop to apply styling." và "React Native allows you to define styles directly in JavaScript instead of using traditional CSS." Trong React Native, các component lõi như View, Text, Image nhận prop style, và style được viết bằng đối tượng JavaScript với tên thuộc tính dạng camelCase (backgroundColor thay cho background-color), không có tệp CSS. Phát biểu "does not have its own mechanism for managing styles and only uses inline styles" sai vì React Native có StyleSheet.create để khai báo, gom và tái dùng style bên ngoài JSX, không chỉ viết inline. Phát biểu "Core components in React Native do not support the style prop." mâu thuẫn trực tiếp với cách các component lõi được tạo kiểu thông qua prop style.

Đáp án đúng: "MobX". MobX quản lý state theo mô hình lập trình phản ứng hàm (functional reactive programming): dữ liệu được đánh dấu observable, giá trị computed và component observer tự theo dõi phần dữ liệu chúng đọc, nên khi dữ liệu đổi thì chỉ những phần phụ thuộc tự động tính lại và render lại, không cần tự phát action. "useReducer" là hook có sẵn của React, quản lý state cục bộ theo mẫu reducer nhận state cũ và action rồi trả state mới, không có cơ chế theo dõi phụ thuộc tự động. "Redux" dùng một store tập trung với action và reducer thuần, luồng dữ liệu một chiều rõ ràng nhưng cập nhật bằng dispatch tường minh chứ không phản ứng tự động. "Realm" là cơ sở dữ liệu cục bộ trên thiết bị để lưu trữ bền vững, không phải thư viện quản lý state theo mô hình này.

Đáp án đúng: "flex-start". alignContent quyết định cách phân bố các hàng phần tử dọc theo trục phụ khi container cho phép xuống dòng với flexWrap: 'wrap'; trên web CSS giá trị mặc định tương đương stretch, còn React Native dùng engine Yoga với mặc định flex-start, tức các hàng dồn về đầu trục phụ. "stretch" chính là mặc định của CSS mà câu hỏi đem ra so sánh, kéo giãn các hàng cho lấp đầy trục phụ, không phải mặc định của React Native. "center" gom các hàng vào giữa trục phụ, chỉ có khi đặt tường minh. "flex-end" dồn các hàng về cuối trục phụ, cũng phải đặt tường minh chứ không phải mặc định. Lưu ý alignContent chỉ có tác dụng khi có nhiều hàng.

Đáp án đúng gồm hai ý: "SafeAreaView only applies and works on iOS devices from version 11 and above." và "You can use SafeAreaView on both iOS and Android, but it will not automatically add padding on Android. Instead, you may need to use other solutions or third-party libraries to handle safe areas on Android.". SafeAreaView có sẵn trong React Native tự thêm padding để nội dung không bị tai thỏ, thanh trạng thái hay thanh home indicator che, nhưng nó dựa trên vùng an toàn (safe area insets) mà iOS chỉ cung cấp từ iOS 11; trên Android nó hiển thị như một View thường, nên người ta dùng thư viện react-native-safe-area-context hoặc tự cộng chiều cao StatusBar. "You should not use SafeAreaView on iPhone 13 because it is not compatible with sensor housing." sai vì iPhone 13 có tai thỏ chứa cụm cảm biến, chính là trường hợp SafeAreaView được làm ra để xử lý. "SafeAreaView automatically handles both the notch and status bar on all iOS versions." sai vì trên iOS trước 11 không có API vùng an toàn, component không tính được phần lề này, nên cụm "all iOS versions" làm phát biểu sai.

Đáp án đúng gồm hai ý: "Allows direct and easy interaction between API producers (those who create APIs) and API consumers (those who use APIs)." và "Helps manage the entire API lifecycle, from the design, development, deployment, to management and maintenance phases." API platform (nền tảng API, ví dụ Postman) gom công cụ cho cả vòng đời API: thiết kế, viết tài liệu, kiểm thử, triển khai, giám sát và bảo trì, đồng thời là nơi bên tạo API chia sẻ đặc tả và tài liệu với bên dùng API để hai bên cộng tác trực tiếp. "Automatically writes API code without human intervention." sai vì nền tảng chỉ hỗ trợ việc như sinh mã mẫu từ đặc tả, logic nghiệp vụ vẫn do lập trình viên viết. Phát biểu "Completely replaces existing CI/CD" sai vì nền tảng API thường tích hợp vào quy trình CI/CD (chạy bộ kiểm thử API trong pipeline) chứ không thay thế các công cụ đó.

Đáp án đúng gồm hai ý: "When there are differences in the user interface between platforms." và "When needing to use different UI components between Android and iOS.". React Native khuyến khích dùng chung tối đa mã, nhưng khi giao diện hai nền tảng phải khác nhau (theo Material Design trên Android và Human Interface Guidelines trên iOS) hoặc cần component chỉ có ở một bên như DrawerLayoutAndroid, thì nên tách mã bằng Platform.OS, Platform.select hay tệp đuôi .ios.js và .android.js. "When needing to optimize code reuse between platforms." đi ngược lại: muốn tối ưu tái sử dụng thì càng phải viết mã chung, không tách. "When the business logic changes completely between Android and iOS." không phải tình huống điển hình: logic nghiệp vụ của cùng một ứng dụng thường giống nhau trên hai nền tảng và nên đặt trong phần mã dùng chung; việc viết mã riêng theo nền tảng trong React Native chủ yếu để xử lý khác biệt về giao diện và API native.

Đáp án đúng: "stretch". alignItems căn các phần tử con dọc theo trục phụ (cross axis) của container; giá trị stretch, cũng là mặc định trong React Native, kéo giãn mỗi phần tử cho phủ hết chiều trục phụ, với điều kiện phần tử không đặt cố định kích thước theo trục đó (ví dụ width khi flexDirection là 'column'). "flex-start" dồn các phần tử về đầu trục phụ và giữ kích thước tự nhiên của chúng. "flex-end" dồn về cuối trục phụ, cũng không kéo giãn. "center" đặt các phần tử vào giữa trục phụ, kích thước giữ nguyên theo nội dung. Muốn một phần tử riêng lẻ khác đi thì dùng alignSelf.

Đáp án đúng: "By leveraging JavaScript and React". React Native cho phép viết một codebase bằng JavaScript (hoặc TypeScript) theo mô hình component của React; lúc chạy, các component như View, Text, Image được ánh xạ thành thành phần giao diện native thật của từng nền tảng, còn logic chạy trên engine JavaScript như Hermes. Nhờ vậy cùng một mã nguồn sinh ra ứng dụng cho cả iOS lẫn Android. "Via HTML and CSS only" sai vì React Native không dùng HTML; giao diện dựng bằng component riêng, style viết bằng đối tượng JavaScript giống CSS chứ không phải CSS thật. "By using native Swift and Kotlin separately" sai vì viết riêng Swift và Kotlin là hai codebase, đúng điều React Native muốn tránh. "Through web views in mobile browsers" sai vì đó là cách của ứng dụng lai như Cordova hay Ionic; React Native không vẽ giao diện trong web view.

Đáp án đúng: "flexDirection". flexDirection xác định trục chính (main axis): 'column' (mặc định trong React Native) xếp con từ trên xuống, 'row' xếp từ trái sang phải, cùng các biến thể đảo chiều 'row-reverse' và 'column-reverse'. "flexWrap" chỉ quyết định các con có được xuống dòng khi tràn trục chính hay không, không đổi hướng xếp. "alignItems" căn các con theo trục phụ (cross axis), ví dụ căn giữa theo chiều ngang khi trục chính là cột. "justifyContent" phân bố các con dọc theo trục chính (flex-start, center, space-between…), nhưng hướng của trục đó vẫn do flexDirection quyết định.

Đáp án đúng: "getCurrentPosition()". Geolocation API (dùng qua navigator.geolocation hoặc thư viện @react-native-community/geolocation) có phương thức getCurrentPosition nhận callback thành công, callback lỗi và tuỳ chọn, để lấy vị trí hiện tại một lần; kết quả là đối tượng position chứa coords.latitude, coords.longitude và accuracy. Muốn theo dõi liên tục thì dùng watchPosition rồi dừng bằng clearWatch. "getLocation()" không phải phương thức của Geolocation API, chỉ là một tên đoán theo nghĩa. "currentPosition()" cũng không tồn tại; tên thật có động từ get ở đầu. "fetchPosition()" gợi cảm giác gọi mạng nhưng không có trong API; vị trí được lấy từ GPS hoặc mạng của thiết bị thông qua getCurrentPosition.