Đáp án đúng: "space-between". justifyContent phân bố phần tử dọc theo trục chính; space-between đặt phần tử đầu sát mép đầu, phần tử cuối sát mép cuối, khoảng trống còn lại chia đều vào giữa các phần tử, nên các khe bằng nhau và không có khoảng dư ở hai mép container. "space-around" chia cho mỗi phần tử một khoảng bằng nhau ở hai bên, nên khoảng ở mép chỉ bằng nửa khe giữa, vẫn có khoảng dư ở mép. "space-evenly" làm mọi khoảng, kể cả hai mép, bằng nhau, nên mép cũng có khoảng trống. "center" dồn cả nhóm vào giữa trục chính, khoảng trống nằm hết ở hai mép.
Đáp án đúng: "Can freeze UI or cause lag". UI thread (luồng giao diện, còn gọi là main thread) vừa vẽ khung hình vừa xử lý chạm; nếu native module chạy việc nặng như đọc tệp lớn, xử lý ảnh hay gọi mạng đồng bộ trên luồng này thì không còn thời gian vẽ khung hình kế tiếp, ứng dụng giật, đứng hình, trên Android có thể hiện ANR. Vì vậy việc nặng nên chạy ở luồng nền rồi trả kết quả qua Promise hoặc callback. "Causes Redux conflict" sai vì Redux là thư viện trạng thái phía JavaScript, không phụ thuộc luồng native. "Makes hooks invalid" sai vì luật của hook chỉ liên quan thứ tự gọi trong component, không dính tới native thread. "Prevents JSX compilation" sai vì JSX được Babel biên dịch lúc build, trước khi ứng dụng chạy.
AExecuting native code and managing the user interface.
BContaining and compiling all JavaScript code, running the bundle when the application starts.
CCalculating the interface layout using the Yoga tool.
DManaging native modules to ensure they are always ready.
Lời giải
Đáp án đúng: "Containing and compiling all JavaScript code, running the bundle when the application starts.". Trong kiến trúc cổ điển, React Native có ba luồng chính: JavaScript Thread nạp bundle do Metro đóng gói, đưa cho engine như Hermes hay JavaScriptCore biên dịch và chạy toàn bộ mã JavaScript (component, state, logic, gọi API); Native Thread (UI Thread) vẽ giao diện và nhận thao tác chạm; Shadow Thread tính bố cục. "Executing native code and managing the user interface." sai vì đó là việc của Native Thread, tức main thread của ứng dụng. "Calculating the interface layout using the Yoga tool." sai vì việc tính bố cục bằng Yoga thuộc Shadow Thread. "Managing native modules to ensure they are always ready." sai vì Native Module được khởi tạo và chạy ở phía native, trên hàng đợi riêng của module hoặc Native Thread; JavaScript Thread chỉ gửi lời gọi tới chúng.
import React,{ Component } from 'react';
import { Text, View } from 'react-native';
class Header extends Component {render(){return(<View><Text>This is header!</Text></View>);}}
class Footer extends Component {render(){return(<View><Text> This is footer!</Text></View>);}}
class MainScreen extends Component {render(){return(<View><Header /><Footer /></View>);}}
export default MainScreen;
AThis is header! This is footer!
BThis is footer! This is header!
CThis is header!
DThis is footer!
Lời giải
Đáp án đúng: "This is header! This is footer!". Lần theo mã: MainScreen render một View chứa lần lượt Header rồi Footer; Header render View bọc Text in "This is header!", Footer render View bọc Text in " This is footer!" (có dấu cách đầu). Vì View mặc định có flexDirection là column, hai dòng chữ hiện từ trên xuống theo đúng thứ tự khai báo, header trước, footer sau. "This is footer! This is header!" đảo thứ tự, sai vì React Native giữ thứ tự các con như trong JSX. "This is header!" thiếu phần footer dù Footer vẫn được render. "This is footer!" thiếu phần header dù Header được render trước. Các class component ở đây chỉ có render nên không có state hay điều kiện nào làm ẩn phần tử.
Đáp án đúng: "style={{ alignItems: 'center', justifyContent: 'center' }}". Với flexDirection mặc định là column trong React Native, justifyContent căn phần tử con theo trục chính (trục dọc) còn alignItems căn theo trục phụ (trục ngang), nên đặt cả hai bằng 'center' trên View cha có kích thước, chẳng hạn flex: 1, sẽ đưa Text vào chính giữa. "style={{ flexDirection: 'row', alignContent: 'center' }}" không làm được vì alignContent chỉ tác động khi các dòng phần tử bị xuống hàng với flexWrap, không căn một phần tử theo cả hai chiều. "style={{ position: 'absolute', top: 0, left: 0 }}" ghim phần tử vào góc trên bên trái. "style={{ flexWrap: 'wrap', alignSelf: 'center' }}" chỉ cho xuống dòng và căn chính phần tử đó theo trục phụ, không căn giữa theo trục chính.
Đáp án đúng: "Promises enable async/await syntax". Phương thức native có thể trả kết quả về JavaScript bằng callback hoặc Promise; với Promise, phía native nhận cặp resolve và reject (RCTPromiseResolveBlock trên iOS, tham số Promise trên Android), còn phía JavaScript có thể viết await MyModule.doWork() trong hàm async, bắt lỗi bằng try/catch và tránh lồng callback nhiều tầng. "Promises are faster" sai vì cả hai đều đi qua cùng cơ chế gọi native bất đồng bộ; Promise không làm lời gọi nhanh hơn. "Promises are synchronous" sai vì Promise biểu diễn kết quả bất đồng bộ, giá trị chỉ có sau khi phía native gọi resolve. "Promises support JSON only" sai vì Promise không giới hạn kiểu; giá trị trả về chỉ cần là kiểu mà bridge chuyển được như chuỗi, số, mảng, đối tượng.
Đáp án đúng: "Inline styles". Trong React Native, style là đối tượng JavaScript với tên thuộc tính viết camelCase, ví dụ truyền thẳng vào prop style một đối tượng có backgroundColor và fontSize; đó là inline style, và StyleSheet.create cũng dùng đúng dạng đối tượng này, chỉ là gom ra ngoài component. "CSS modules" là các tệp .css có tên class được băm cục bộ, dùng trên web cùng bundler, React Native không đọc được. "SASS files" là ngôn ngữ tiền xử lý CSS với cú pháp tên thuộc tính có gạch nối như background-color, không dùng trong React Native. "HTML classes" là thuộc tính class hay className của HTML để gắn style từ tệp CSS, trong khi React Native không có HTML và không áp style theo class.
setCount(count + 1)} /></View>; };". useState(0) trả về mảng hai phần tử gồm giá trị hiện tại và hàm cập nhật, nên phải tách bằng destructuring thành count và setCount. Mỗi lần bấm, hàm mũi tên gọi setCount(count + 1), React lưu giá trị mới và render lại Counter nên Text hiện số đã tăng. Bản có "onPress={() => count++}" sai vì count lúc này là cả mảng do useState trả về chứ không phải con số, lại khai báo bằng const nên count++ gây lỗi gán lại hằng, và tự đổi biến cục bộ cũng không báo cho React render lại. Bản có "onPress={setCount}" truyền thẳng setCount làm trình xử lý, nên Button gọi nó với đối tượng sự kiện chạm và count bị gán thành đối tượng đó thay vì tăng thêm 1. Bản có "onPress={() => setCount(count)}" gọi setCount trong khi chưa hề khai báo vì không destructure, nên báo lỗi không tìm thấy biến; kể cả có khai báo thì đặt lại đúng giá trị cũ cũng không tăng.
ARequires writing separate code for each platform.
BAllows code reuse across iOS and Android.
COnly uses native components, no plugins needed.
DCompletely eliminates open-source libraries.
Lời giải
Đáp án đúng: "Allows code reuse across iOS and Android.". React Native tiết kiệm chi phí vì một nhóm lập trình viên viết một codebase JavaScript hoặc TypeScript chạy trên cả iOS và Android, thay vì nuôi hai đội riêng cho Swift và Kotlin; sửa lỗi, thêm tính năng cũng chỉ làm một lần. "Requires writing separate code for each platform." là đặc điểm tốn kém của phát triển native riêng, đúng là điều React Native giúp tránh. "Only uses native components, no plugins needed." sai vì React Native dựa nhiều vào thư viện bên thứ ba cho điều hướng, lưu trữ, camera và nhiều thứ khác. "Completely eliminates open-source libraries." càng sai, vì chính React Native là dự án mã nguồn mở và hệ sinh thái của nó gồm vô số thư viện mã nguồn mở.
Đáp án đúng: "column". Trong React Native, mỗi View là flex container và bố cục do engine Yoga tính; Yoga mặc định flexDirection là column, tức trục chính chạy dọc, các phần tử con xếp chồng từ trên xuống. Đây là điểm dễ nhầm vì CSS trên web mặc định là row. Hiểu đúng mặc định này giúp đoán được justifyContent đang căn theo chiều dọc còn alignItems căn theo chiều ngang. "row" sai trong React Native vì đó là mặc định của trình duyệt, ở đây phải gán flexDirection: 'row' mới có hàng ngang. "row-reverse" sai vì đây là hàng ngang đảo chiều từ phải sang trái, chỉ có khi gán rõ. "column-reverse" sai vì nó xếp dọc từ dưới lên, là biến thể đảo của column chứ không phải mặc định.
Đáp án đúng: "alignItems". alignItems căn các phần tử con dọc theo trục phụ (cross axis), trục vuông góc với hướng flexDirection; với mặc định column trong React Native, trục phụ là chiều ngang nên alignItems: 'center' đưa con vào giữa theo chiều ngang. "justifyContent" căn và phân bố phần tử theo trục chính, không phải trục phụ. "flexDirection" chỉ định trục chính là hàng hay cột, tức quyết định trục nào là trục phụ chứ không căn phần tử. "flexGrow" quy định phần tử giãn ra chiếm bao nhiêu khoảng trống còn dư dọc trục chính. Muốn chỉnh riêng một phần tử theo trục phụ thì dùng alignSelf.
AThe component is created and rendered in the DOM.
BThe component is updated with new state or props.
CThe component is removed from the DOM.
DThe component handles errors.
Lời giải
Đáp án đúng: "The component is removed from the DOM.". Unmounting là giai đoạn cuối của vòng đời: component bị gỡ khỏi cây giao diện (trong React Native là cây view native, chữ DOM ở đây dùng theo cách gọi quen thuộc của React web); ngay trước đó componentWillUnmount hoặc hàm cleanup của useEffect chạy để huỷ timer, listener, subscription, tránh rò rỉ bộ nhớ. "The component is created and rendered in the DOM." là giai đoạn Mounting, khi constructor, render và componentDidMount chạy lần đầu. "The component is updated with new state or props." là giai đoạn Updating, xảy ra mỗi khi dữ liệu thay đổi. "The component handles errors." là giai đoạn Error Handling, dùng getDerivedStateFromError và componentDidCatch trong error boundary.
BIt converts JS code into native parts and vice versa.
CIt reduces the need for native modules.
DIt eliminates the need for a JavaScript thread.
Lời giải
Đáp án đúng: "It converts JS code into native parts and vice versa.". Trong kiến trúc cũ, bridge (cầu nối) là kênh bất đồng bộ giữa thread JavaScript và phía native: lời gọi và mô tả giao diện từ JavaScript được tuần tự hoá thành JSON rồi chuyển sang để phía native dựng view thật hay gọi API hệ thống, còn sự kiện chạm và kết quả từ native đi theo chiều ngược lại; đây là ý của việc chuyển đổi qua lại giữa hai phía. "It simplifies the codebase." không phải tác động của bridge, nó còn thêm một lớp trung gian và chi phí tuần tự hoá. "It reduces the need for native modules." sai vì chính nhờ bridge mà native module mới gọi được từ JavaScript. "It eliminates the need for a JavaScript thread." sai vì bridge nối tới thread JavaScript chứ không thay thế nó.
AThe Platform module allows checking the platform the application is running on.
BPlatform is used to synchronize data between Android and iOS.
CPlatform.OS helps select the appropriate processing logic for a specific platform.
DPlatform is a default component of react-native for creating custom components.
Lời giải
Đáp án đúng gồm hai ý: "The Platform module allows checking the platform the application is running on." và "Platform.OS helps select the appropriate processing logic for a specific platform.". Platform là module tiện ích (không phải component) của react-native: Platform.OS trả về 'ios' hoặc 'android', Platform.Version cho phiên bản hệ điều hành, và Platform.select nhận đối tượng có khoá ios, android để chọn giá trị phù hợp, nhờ đó viết nhánh logic hay style riêng cho từng nền tảng trong cùng một tệp. "Platform is used to synchronize data between Android and iOS." sai vì Platform chỉ đọc thông tin môi trường chạy trên chính thiết bị, không truyền hay đồng bộ dữ liệu giữa các thiết bị. "Platform is a default component of react-native for creating custom components." sai vì Platform không render gì cả; component tuỳ chỉnh được tạo bằng hàm hoặc class React.
BA software system with tools to build, manage, publish, and consume APIs
CA type of cloud infrastructure
DA web browser
Lời giải
Đáp án đúng: "A software system with tools to build, manage, publish, and consume APIs". Nền tảng API (API platform) là hệ thống phần mềm gom công cụ cho toàn vòng đời API: thiết kế đặc tả, viết và kiểm thử, xuất bản kèm tài liệu, quản lý phiên bản và quyền, tới phía người dùng khám phá và gọi API; Postman là ví dụ quen thuộc. "A database management system" sai vì hệ quản trị cơ sở dữ liệu lưu và truy vấn dữ liệu, không quản lý API. "A type of cloud infrastructure" sai vì nền tảng API có thể chạy trên đám mây nhưng bản thân nó là bộ công cụ, không phải hạ tầng máy chủ. "A web browser" chỉ là ứng dụng hiển thị trang web, gửi được yêu cầu HTTP nhưng không có chức năng quản lý API.
import { useNavigationState } from '@react-navigation/native';
function CurrentRouteComponent(){
const currentRoute =useNavigationState(state => state.routes[state.index].name);return(<Text>Current Route:{currentRoute}</Text>);}
AThe index of the current route in the navigation stack
BThe parameters of the current route
CThe name of the current route
DThe state object of the current route
Lời giải
Đáp án đúng: "The name of the current route". useNavigationState nhận một hàm selector, gọi nó với state của navigator gần nhất và trả về kết quả, đồng thời render lại component khi kết quả đổi. Lần theo mã: state.routes là mảng các route trong navigator, state.index là vị trí route đang hiển thị, nên state.routes[state.index] là đối tượng route hiện tại, và thêm .name lấy ra tên của nó, ví dụ "Home" hay "Profile"; component in chuỗi đó trong Text. "The index of the current route in the navigation stack" sai vì đó là state.index, mã chỉ dùng index để truy cập phần tử chứ không trả về nó. "The parameters of the current route" sai vì muốn lấy tham số phải đọc .params thay vì .name. "The state object of the current route" sai vì selector đi thêm một bước tới .name, trả về chuỗi chứ không trả về cả đối tượng route.
Đáp án đúng: "Drawer Navigator". Drawer Navigator hiển thị một ngăn kéo menu trượt ra từ cạnh màn hình (vuốt hoặc bấm biểu tượng menu), chứa các mục dẫn tới những phần lớn của ứng dụng, nên người dùng truy cập được các khu vực toàn cục từ bất kỳ màn hình nào. "Bottom Tab Navigator" cũng chuyển giữa các khu vực nhưng bằng thanh tab cố định ở đáy, không phải menu trượt, và hợp với số ít mục dùng thường xuyên. "Stack Navigator" quản lý các màn hình theo ngăn xếp, đi tới thì đẩy màn hình mới, quay lại thì gỡ ra, không có menu. "Inline Navigator" không phải navigator có trong React Navigation.
Đáp án đúng: "useLinking". Ở React Navigation 5, hook useLinking dùng với container điều hướng để lắng nghe URL mở ứng dụng, đối chiếu với prefixes và cấu hình ánh xạ đường dẫn sang màn hình rồi điều hướng tới đúng nơi, tức là xử lý deep linking (liên kết sâu); các bản sau chuyển phần này thành prop linking của NavigationContainer. "useScrollToTop" làm danh sách cuộn lên đầu khi bấm lại tab đang mở. "useRoute" trả về đối tượng route của màn hình hiện tại để đọc name và params. "useNavigation" trả về đối tượng navigation cho component không phải màn hình, để gọi navigate hay goBack.
BCompletely eliminates the need for a navigation container.
CReduces or eliminates the dependency on Higher-Order Components (HOCs).
DRequires the use of class components.
Lời giải
Đáp án đúng gồm hai ý: "Allows easier use in functional components." và "Reduces or eliminates the dependency on Higher-Order Components (HOCs).". React Navigation 5 thêm các hook như useNavigation, useRoute, useFocusEffect, useIsFocused; component hàm ở bất kỳ tầng nào gọi hook là lấy được đối tượng navigation hay route, không cần nhận qua prop. Trước đó, component con muốn điều hướng phải được bọc bằng HOC (Higher-Order Component, hàm nhận component và trả về component mới) như withNavigation hay withNavigationFocus, làm cây component rối và khó khai báo kiểu. "Completely eliminates the need for a navigation container." sai vì từ bản 5 trở đi ứng dụng vẫn phải bọc navigator trong NavigationContainer; hook không thay thế nó. "Requires the use of class components." sai vì hook chỉ dùng được trong component hàm, còn class component vẫn nhận navigation qua prop như cũ.
Đáp án đúng: "Using the drawerWidth prop". DrawerLayoutAndroid là component chỉ có trên Android, bọc nội dung chính và một ngăn kéo trượt ra từ cạnh; nó có prop drawerWidth nhận một số đơn vị độc lập mật độ (dp) để quy định bề rộng ngăn kéo, cùng các prop drawerPosition, renderNavigationView. "Using the style prop" áp style cho vùng chứa của layout chứ không điều khiển bề rộng ngăn kéo. "Using the drawerStyle prop" là option của Drawer Navigator trong React Navigation, không phải prop của DrawerLayoutAndroid. "Using a CSS file" không áp dụng được vì React Native không dùng tệp CSS; style được viết bằng đối tượng JavaScript với StyleSheet.create hoặc inline.
