Đáp án đúng: "Native Thread". Trong kiến trúc Bridge (cầu nối) của React Native, ứng dụng chạy trên vài luồng tách biệt: Native Thread, còn gọi là main thread hay UI thread, là nơi mã gốc Java/Kotlin trên Android hoặc Objective-C/Swift trên iOS được thực thi, vẽ giao diện và nhận sự kiện chạm. "JavaScript Thread" là nơi engine JavaScript chạy mã nghiệp vụ và React, nó chỉ gửi thông điệp qua Bridge chứ không tự thực thi mã native. "Shadow Thread" chuyên tính bố cục bằng Yoga từ các style flexbox rồi chuyển kết quả cho luồng chính, không chạy mã native của ứng dụng. "ReactNative Thread" không phải tên một luồng trong mô hình này, nghe giống thật nhưng không tồn tại trong kiến trúc Bridge.
AIf you do not provide keyExtractor, FlatList will attempt to use the item.key property of each item as the default key.
BkeyExtractor is used to display the key of each item in the user interface (UI).
CkeyExtractor is used to create or identify a unique ID for each item in the data list that FlatList displays.
DkeyExtractor is a required prop for FlatList to function.
Lời giải
Đáp án đúng gồm hai ý: "If you do not provide keyExtractor, FlatList will attempt to use the item.key property of each item as the default key." và "keyExtractor is used to create or identify a unique ID for each item in the data list that FlatList displays.". FlatList cần một key ổn định cho mỗi phần tử để React đối chiếu (reconciliation, tức so khớp cây cũ với cây mới) khi dữ liệu thay đổi, nhờ đó tái sử dụng đúng ô và giữ đúng state. keyExtractor là hàm nhận item và index rồi trả về chuỗi key; nếu bỏ trống, FlatList mặc định đọc item.key, không có thì rơi về index. Phát biểu "keyExtractor is used to display the key of each item in the user interface (UI)." sai vì key chỉ dùng nội bộ cho việc đối chiếu, không bao giờ hiện lên màn hình; muốn hiện gì phải tự vẽ trong renderItem. Phát biểu "keyExtractor is a required prop for FlatList to function." sai vì prop này tuỳ chọn: thiếu nó FlatList vẫn chạy với item.key hoặc index, chỉ phát cảnh báo khi không tìm được key nào.
ATo accurately reflect user behavior (i.e., when the user toggles the switch), you need to handle the onValueChange event and update the value of the corresponding value prop.
BSwitch operates in an uncontrolled manner, so it is not necessary to pass the value prop.
CSwitch is a controlled component, meaning you need to update its value through the onValueChange callback.
DThe onValueChange callback is only used to display the current state of the Switch and does not affect the application logic.
Lời giải
Đáp án đúng gồm hai ý: "To accurately reflect user behavior (i.e., when the user toggles the switch), you need to handle the onValueChange event and update the value of the corresponding value prop." và "Switch is a controlled component, meaning you need to update its value through the onValueChange callback." Switch là controlled component (thành phần được điều khiển): vị trí bật/tắt hiển thị luôn lấy từ prop value, nên khi người dùng gạt, onValueChange được gọi với giá trị boolean mới và ta phải cập nhật state (ví dụ setIsEnabled) để value đổi theo; nếu không cập nhật, công tắc bật ngược về giá trị cũ. Phát biểu "Switch operates in an uncontrolled manner" sai vì Switch không tự giữ trạng thái, thiếu value thì nó không phản ánh lựa chọn của người dùng. Phát biểu "is only used to display the current state of the Switch" sai vì onValueChange chính là nơi nhận thay đổi và cập nhật logic ứng dụng, không phải chỉ để hiển thị.
Đáp án đúng: "Distributes space between children". justifyContent điều khiển cách phân bố các phần tử con dọc theo trục chính (main axis, mặc định là trục dọc vì flexDirection mặc định là column trong React Native); giá trị 'space-between' đặt phần tử đầu sát mép đầu, phần tử cuối sát mép cuối rồi chia đều khoảng trống còn dư vào giữa các phần tử, rất hợp cho thanh tiêu đề có nút ở hai bên. "Aligns children at the end of the main axis" là tác dụng của 'flex-end', dồn mọi phần tử về cuối trục chứ không chia khoảng trống. "Aligns children at the start of the main axis" là 'flex-start', giá trị mặc định, gom các phần tử về đầu trục. "Distributes space evenly around children" mô tả 'space-around' (hay gần với 'space-evenly'), nơi hai mép ngoài cũng nhận một phần khoảng trống, trong khi 'space-between' không chừa khoảng trống nào ở hai mép.
Đáp án đúng: "Mounting". Vòng đời (life cycle) của component gồm ba pha lớn: Mounting là lúc component được tạo và gắn vào cây giao diện lần đầu, khi đó constructor khởi tạo state, render chạy lần đầu và componentDidMount (hoặc useEffect với mảng phụ thuộc rỗng) được gọi, nên đây là pha khởi tạo. "Updating" xảy ra sau đó, khi props hoặc state thay đổi khiến component render lại, không phải lúc khởi tạo. "Unmounting" là pha gỡ component khỏi cây, nơi componentWillUnmount hay hàm dọn dẹp của useEffect giải phóng tài nguyên. "Rendering" chỉ là bước gọi render để mô tả giao diện, diễn ra trong cả Mounting lẫn Updating, chứ không phải một pha riêng chịu trách nhiệm khởi tạo.
Đáp án đúng: "navigator.geolocation.getCurrentPosition()". Geolocation API (giao diện lập trình định vị) được gắn vào đối tượng navigator dưới thuộc tính geolocation; hàm getCurrentPosition nhận một callback thành công, một callback lỗi và tuỳ chọn như enableHighAccuracy, rồi trả về một lần vị trí gồm coords.latitude và coords.longitude. Thư viện @react-native-community/geolocation của React Native cũng theo đúng chữ ký này. "device.geolocation.accessLocation()" sai vì JavaScript không có đối tượng toàn cục device và không có hàm accessLocation. "navigator.location.getPosition()" sai vì navigator không có thuộc tính location, tên đúng là geolocation, và hàm cũng không tên getPosition. "geolocation.fetchPosition()" sai vì geolocation không phải biến toàn cục đứng riêng mà phải truy cập qua navigator, và API không có hàm fetchPosition.
AWhen you only need to allow horizontal or vertical scrolling with a few small elements.
BWhen you need to display a long list containing many items.
CWhen you want to precisely control the scroll offset on a pixel-by-pixel basis.
DWhen you prioritize high performance for displaying a large list of items.
Lời giải
Đáp án đúng gồm hai ý: "When you need to display a long list containing many items." và "When you prioritize high performance for displaying a large list of items." ScrollView render (vẽ) toàn bộ phần tử con ngay một lần, kể cả phần nằm ngoài màn hình, nên với danh sách dài nó tốn bộ nhớ và làm chậm lần hiển thị đầu; khi đó nên dùng FlatList hoặc SectionList vì chúng chỉ render các phần tử sắp hiện ra (virtualization, ảo hoá danh sách). Trường hợp "When you only need to allow horizontal or vertical scrolling with a few small elements." chính là chỗ ScrollView phù hợp nhất, vì số phần tử ít nên render hết cũng không tốn kém. Trường hợp "When you want to precisely control the scroll offset on a pixel-by-pixel basis." cũng không phải lý do để tránh ScrollView, vì nó có phương thức scrollTo với toạ độ x, y và sự kiện onScroll trả về contentOffset để điều khiển vị trí cuộn chính xác.
Đáp án đúng: "Manual bridge invocation from UI". Native module (mô-đun viết bằng Java/Kotlin hoặc Objective-C/Swift) được JavaScript gọi qua cầu nối (bridge) hoặc lớp TurboModule; muốn biết phần tích hợp phía JS có chạy thật hay không thì cách trực tiếp nhất là gắn lời gọi phương thức native vào một thao tác trên giao diện, ví dụ một nút bấm, rồi chạy app trên thiết bị và quan sát kết quả, callback hay Promise trả về. "Snapshot testing" chỉ chụp lại cây giao diện đã render để so sánh giữa các lần chạy, không hề chạm tới mã native. "Console.log" chỉ là cách in giá trị ra để gỡ lỗi, tự nó không kích hoạt được lời gọi sang native. "ESLint" là công cụ phân tích tĩnh mã JavaScript, phát hiện lỗi cú pháp và vi phạm quy ước nhưng không chạy mã, nên không thể xác nhận module native phản hồi đúng.
Đáp án đúng: "Using camelCase". Style trong React Native là đối tượng JavaScript, nên tên thuộc tính phải là định danh hợp lệ viết kiểu camelCase (chữ đầu thường, các từ sau viết hoa chữ cái đầu), ví dụ backgroundColor thay cho background-color, fontSize thay cho font-size. "Using kebab-case" là cách viết của CSS trên web, dấu gạch ngang không dùng được làm khoá đối tượng nếu không bọc ngoặc và React Native không nhận nó. "Using snake_case" (nối bằng gạch dưới như background_color) không phải quy ước của API style nên thuộc tính sẽ bị bỏ qua. "Using PascalCase" viết hoa cả chữ đầu, là quy ước đặt tên component như View hay Text, không phải tên thuộc tính style.
Đáp án đúng: "View". View là component (thành phần giao diện) nền tảng nhất của React Native, đóng vai trò khung chứa giống thẻ div trên web: nó gom nhiều component con lại, hỗ trợ Flexbox để bố cục, nhận style, xử lý chạm và được ánh xạ sang UIView trên iOS, android.view.View trên Android. "Component" sai vì đó là lớp cơ sở React.Component dùng để định nghĩa component dạng class, không phải một phần tử giao diện để bọc các phần tử khác. "ScrollView" có thể chứa nhiều con nhưng mục đích của nó là tạo vùng cuộn; dùng nó chỉ để gom nhóm là thừa và tốn tài nguyên hơn View. "Text" sai vì Text dùng để hiển thị chữ, bên trong chỉ lồng chuỗi hoặc Text khác, không làm khung bố cục chung cho các component.
AIt allows for code reuse across different platforms.
BIt simplifies the debugging process.
CIt enables the use of platform-specific components.
DIt reduces the overall application size.
Lời giải
Đáp án đúng: "It enables the use of platform-specific components.". Khi đặt tên tệp theo đuôi nền tảng như Button.ios.js và Button.android.js, Metro bundler (công cụ đóng gói) tự chọn đúng tệp theo nền tảng đang build trong khi mã gọi chỉ cần import Button, nhờ đó viết được component riêng cho iOS và Android khi hai bên khác nhau quá nhiều. "It allows for code reuse across different platforms." không phải lợi ích của cơ chế này: tách tệp là để phân nhánh mã theo nền tảng, còn tái sử dụng đến từ phần mã chung viết một lần trong tệp .js thường. "It simplifies the debugging process." sai vì có hai bản cài đặt thì phải kiểm thử và gỡ lỗi trên cả hai nền tảng, không đơn giản hơn. "It reduces the overall application size." chỉ là hệ quả phụ rất nhỏ (bundle của mỗi nền tảng không chứa tệp của nền tảng kia), không phải mục đích của đuôi tệp riêng.
Đáp án đúng: "Calling an undefined native method". Khi JavaScript gọi NativeModules.TenModule.tenHam mà phương thức đó chưa được export ở phía native (thiếu RCT_EXPORT_METHOD trên iOS hoặc @ReactMethod trên Android), hoặc module chưa được liên kết vào bản build, giá trị nhận được là undefined; gọi undefined như một hàm sẽ ném TypeError và ứng dụng có thể sập ngay lúc chạy. "Hot reloading" chỉ nạp lại mã JS trong lúc phát triển và cố giữ nguyên state, không làm app crash. "Using console.log()" chỉ ghi log ra console, hoàn toàn an toàn, dù nên gỡ bớt ở bản production để đỡ tốn hiệu năng. "Using Flexbox" là cơ chế bố cục mặc định của React Native với flexDirection, justifyContent, alignItems để sắp xếp phần tử, không liên quan gì tới lỗi của native module.
AYou must assign the InputAccessoryView component as a direct child of the TextInput component.
BThe TextInput component must have an inputAccessoryViewID prop whose value matches the value of the nativeID prop of the corresponding InputAccessoryView component.
CAny custom toolbar you want to display above the keyboard needs to be wrapped inside an InputAccessoryView component, and that InputAccessoryView component must have a nativeID assigned.
DSimply declaring the InputAccessoryView component anywhere in the component tree is sufficient for it to work.
Lời giải
Đáp án đúng gồm hai ý: "The TextInput component must have an inputAccessoryViewID prop whose value matches the value of the nativeID prop of the corresponding InputAccessoryView component." và "Any custom toolbar you want to display above the keyboard needs to be wrapped inside an InputAccessoryView component, and that InputAccessoryView component must have a nativeID assigned.". InputAccessoryView (chỉ có trên iOS) cho phép gắn một thanh công cụ tuỳ biến ngay phía trên bàn phím; cơ chế liên kết là cặp định danh: thanh công cụ được bọc trong InputAccessoryView có nativeID, còn TextInput trỏ tới nó qua inputAccessoryViewID cùng giá trị, nên khi ô nhập được focus thì bàn phím hiện kèm thanh đó. Phát biểu "as a direct child of the TextInput component" sai vì TextInput không nhận con kiểu này, liên kết đi qua ID chứ không qua quan hệ cha con. Phát biểu "Simply declaring the InputAccessoryView component anywhere" sai vì chỉ khai báo mà không khớp nativeID với inputAccessoryViewID thì không ô nhập nào biết dùng thanh công cụ ấy.
BImageBackground supports rendering child components over the image
CImageBackground is optimized for faster loading
DImage does not support remote image sources
Lời giải
Đáp án đúng: "ImageBackground supports rendering child components over the image". Image trong React Native là phần tử lá, không nhận children; muốn đặt chữ, nút hay lớp phủ lên trên ảnh thì dùng ImageBackground, vốn là một View bọc Image được định vị tuyệt đối phía sau, nên mọi children đặt trong nó sẽ nằm đè lên ảnh, rất hợp cho màn hình chào hoặc thẻ có ảnh nền. "ImageBackground provides touch gesture support" sai vì ImageBackground không tự xử lý chạm; muốn bấm được phải bọc nó trong Pressable hoặc TouchableOpacity, giống như với Image. "ImageBackground is optimized for faster loading" sai vì nó dùng cùng cơ chế tải ảnh với Image, không có tối ưu tốc độ riêng; lý do chọn nó là bố cục chứ không phải hiệu năng. "Image does not support remote image sources" sai vì Image vẫn tải được ảnh từ mạng qua prop source với uri, chỉ cần khai báo kèm width và height.
Đáp án đúng: "Places side by side". flexDirection quyết định trục chính (main axis) mà các con được xếp dọc theo; giá trị 'row' đặt trục chính nằm ngang nên các phần tử con được xếp cạnh nhau từ trái sang phải, trong khi mặc định của React Native là 'column'. "Stacks vertically" là kết quả của flexDirection: 'column', giá trị mặc định, chứ không phải 'row'. "Overlaps all items" sai vì Flexbox không chồng các con lên nhau; muốn chồng phải dùng position: 'absolute'. "Aligns in a circle" sai vì Flexbox chỉ bố trí theo một trục thẳng (hàng hoặc cột), không có kiểu xếp vòng tròn; muốn vậy phải tự tính toạ độ hoặc dùng transform.
Đáp án đúng: "@react-navigation/native-stack". Tài liệu React Navigation hiện nay khuyến nghị createNativeStackNavigator từ gói @react-navigation/native-stack, vì nó dùng chính thành phần điều hướng gốc của nền tảng (UINavigationController trên iOS, Fragment trên Android) nên chuyển màn mượt và hiệu năng tốt; cài kèm @react-navigation/native và react-native-screens. "@react-navigation/stack" là stack dựng bằng JavaScript: vẫn dùng được và cho tuỳ biến hoạt ảnh linh hoạt hơn, nhưng chạy hoạt ảnh phía JS nên không phải lựa chọn mặc định được đề xuất. "@react-navigation/drawer" tạo ngăn kéo trượt ra từ cạnh màn hình (Drawer Navigator), không phải ngăn xếp màn hình. "@react-navigation/bottom-tabs" tạo thanh tab dưới đáy để chuyển giữa các màn hình ngang hàng, cũng không phải Stack Navigator.
AThe main axis is the direction from left to right, and the cross axis is the direction from top to bottom.
BBoth directions are the main axis.
CThe main axis is the direction from top to bottom, and the cross axis is the direction from left to right.
DThere is no main axis or cross axis in flexDirection: 'row'.
Lời giải
Đáp án đúng: "The main axis is the direction from left to right, and the cross axis is the direction from top to bottom.". Trong flexbox, trục chính (main axis) là trục mà flexDirection chỉ định để xếp các phần tử con, trục phụ (cross axis) vuông góc với nó; với flexDirection: 'row' các con xếp theo hàng ngang nên trục chính chạy từ trái sang phải, còn trục phụ chạy từ trên xuống dưới, vì vậy justifyContent căn theo chiều ngang và alignItems căn theo chiều dọc. Phát biểu "The main axis is the direction from top to bottom, and the cross axis is the direction from left to right." đúng với flexDirection: 'column', mặc định của React Native, chứ không phải 'row'. "Both directions are the main axis." sai vì mỗi container chỉ có đúng một trục chính. "There is no main axis or cross axis in flexDirection: 'row'." sai vì mọi container flex đều có cả hai trục.
Đáp án đúng: "route.params". Trong React Navigation, màn hình gửi dữ liệu bằng
Lời giải
navigation.navigate('Details',{
itemId:42}
), còn màn hình nhận đọc lại qua đối tượng route mà navigator truyền vào làm prop, cụ thể là route.params.itemId, hoặc lấy route bằng hook useRoute. params là kho tham số gắn với từng route trong state điều hướng. "navigation.state" là cách của React Navigation 4 trở về trước (navigation.state.params), đã bị bỏ từ phiên bản 5 khi tách navigation và route thành hai prop riêng. "route.data" sai vì đối tượng route chỉ có các trường như key, name, params, không có trường data. "navigation.params" sai vì navigation là đối tượng chứa các hàm điều hướng như navigate, goBack, setParams, nó không lưu tham số của màn hình hiện tại.
BComponent names should start with a lowercase letter to avoid errors.
CReturns the interface part via return.
DDoes not need to use render() when returning the interface.
Lời giải
Đáp án đúng gồm hai ý: "Returns the interface part via return." và "Does not need to use render() when returning the interface." Function component (component dạng hàm) là một hàm JavaScript nhận props và trả về JSX bằng chính câu lệnh return; nó không có phương thức render() như class component, còn state và vòng đời được xử lý bằng hook như useState, useEffect. "Can be defined using the class keyword." mô tả class component (kế thừa React.Component và bắt buộc có render()), không phải function component. "Component names should start with a lowercase letter to avoid errors." sai theo chiều ngược lại: tên component phải viết hoa chữ cái đầu, vì JSX coi thẻ viết thường là phần tử gốc nên một component đặt tên viết thường sẽ không được nhận diện đúng.
Đáp án đúng: "Reusable code and advanced components". Ưu điểm lớn của React Native là viết một codebase (bộ mã nguồn) JavaScript hoặc TypeScript dùng chung cho cả iOS và Android, đồng thời có sẵn nhiều component ánh xạ sang thành phần native như View, Text, FlatList, cộng với hệ sinh thái thư viện phong phú; nhờ đó tiết kiệm đáng kể thời gian và chi phí phát triển. "Long initialization time" là nhược điểm: app phải nạp JS bundle và khởi tạo runtime nên khởi động chậm hơn app native thuần. "Complex UI handling" cũng là điểm yếu thường được nhắc, vì giao diện có hoạt ảnh nặng hay tương tác phức tạp đôi khi buộc phải viết thêm mã native. "Lack of multithreading" là hạn chế: mã JavaScript chạy chủ yếu trên một luồng JS duy nhất, tác vụ nặng dễ làm giật giao diện.
