aedev.net
  • Trang chủ
  • AI
  • Mobile
  • Flutter
  • React Native
  • Backend
  • DevOps
  • Hướng dẫn
No Result
View All Result
SAVED POSTS
aedev.net
  • Trang chủ
  • AI
  • Mobile
  • Flutter
  • React Native
  • Backend
  • DevOps
  • Hướng dẫn
No Result
View All Result
aedev.net
No Result
View All Result
Minh hoạ style và layout trong React Native với màn hình mobile, spacing và typography

React Native Alert trên Android và hai đường hủy hộp thoại

Suong Nguyen by Suong Nguyen
13/11/2026
in React Native
0
585
SHARES
3.2k
VIEWS
Summarize with ChatGPTShare to Facebook

Một màn hình xác nhận bỏ bản nháp có nút Giữ lại. Trên Android, người dùng cũng có thể đóng hộp thoại bằng cách chạm ngoài khi ứng dụng cho phép. Hai đường tương tác cần đưa giao diện về trạng thái phù hợp, nhất là khi màn hình đã chuyển sang chờ quyết định.

Ví dụ và cách đọc

Trong dự án React Native 0.88, gọi hàm từ nút mở hộp thoại và truyền setter cho nhãn trạng thái. Bài dùng dữ liệu thử trong RAM. Tài liệu Alert mô tả tùy chọn Android cancelable cho thao tác đóng ngoài hộp thoại và onDismiss để xử lý hủy. Nút Giữ lại có onPress riêng. Hành động xác nhận là đường duy nhất trong mẫu cập nhật trạng thái đã xác nhận bỏ.

import {Alert} from 'react-native';

export function confirmDiscard(setStatus) {
  Alert.alert(
    'Bỏ thay đổi thử?',
    'Ví dụ chỉ cập nhật nhãn trạng thái.',
    [
      {text: 'Giữ lại', onPress: () => setStatus('Đã giữ lại')},
      {text: 'Bỏ thay đổi', onPress: () => setStatus('Đã xác nhận bỏ')},
    ],
    {cancelable: true, onDismiss: () => setStatus('Đã giữ lại')},
  );
}

Kiểm tra kết quả

Trên Android, mở hộp thoại và thử ba lượt riêng. Bấm Giữ lại, chạm ngoài hộp thoại, rồi bấm Bỏ thay đổi. Kiểm tra nhãn và trạng thái bản nháp ở từng lượt. Nếu ứng dụng hỗ trợ nút Back, kiểm tra hành vi trên thiết bị đích và ghi phiên bản. Trong luồng thật, cập nhật hủy nên an toàn khi được gọi lại và thao tác xóa nên nằm trong nhánh xác nhận.

Áp dụng và giới hạn

Đối chiếu API ngày 13/11/2026. Mẫu chưa chạy Metro, native build hay thiết bị. Tùy chọn được mô tả ở đây dành cho Android. Nếu sản phẩm hỗ trợ iOS, lập kế hoạch kiểm tra riêng với cách hệ thống trình bày Alert. Giữ nhãn nút cụ thể để người dùng biết hành động nào làm mất bản nháp.

Tình huống áp dụng

Giữ thử nghiệm đầu ở một màn hình chỉ có nhãn và một nút. Như vậy nếu nhãn không đổi, bạn kiểm tra được callback nào được kích hoạt mà chưa phụ thuộc vào việc lưu bản nháp. Khi nối vào màn hình thật, một nhánh xác nhận có thể cần chờ thao tác lưu hoặc xóa hoàn tất trước khi đổi màn hình. Hiển thị kết quả theo trạng thái thực của thao tác đó.

Chọn cancelable theo mức độ quan trọng của quyết định. Với thao tác nhẹ, đóng bên ngoài có thể thuận tiện. Với thao tác đòi hỏi một quyết định rõ ràng, kiểm tra xem người dùng có cần chọn một nút cụ thể hay không và mô tả hành vi mong đợi trong test. Nếu mở hộp thoại từ một màn hình có thể bị thay thế, kiểm tra callback đến sau khi điều hướng để tránh cập nhật nhầm bản nháp. Ghi riêng kết quả từng nút và từng cách đóng khi test trên thiết bị.

Nguồn tham khảo

  • Tài liệu chính thức 1

Tags: AlertAndroidReact Native
SummarizeShare234
Suong Nguyen

Suong Nguyen

Related Stories

Minh hoạ style và layout trong React Native với màn hình mobile, spacing và typography

React Native Keyboard.dismiss: đóng bàn phím mà vẫn giữ bản nháp

by Suong Nguyen
12/11/2026
0

Tách nút đóng bàn phím khỏi thao tác xóa, lưu hoặc xác thực dữ liệu trong TextInput.

Minh hoạ style và layout trong React Native với màn hình mobile, spacing và typography

React Native: thông báo nội dung đổi cho TalkBack bằng accessibilityLiveRegion

by Suong Nguyen
11/11/2026
0

Tạo vùng trạng thái cập nhật với accessibilityLiveRegion polite trên Android và lên kế hoạch kiểm tra bằng TalkBack.

Minh hoạ style và layout trong React Native với màn hình mobile, spacing và typography

React Native Text selectable: cho người dùng chọn và sao chép mã hiển thị

by Suong Nguyen
10/11/2026
0

Bật chọn chữ trên Text bằng selectable, phân biệt với nút sao chép tự động và lập kế hoạch kiểm tra thao tác native trên iOS, Android.

Minh hoạ style và layout trong React Native với màn hình mobile, spacing và typography

React Native ScrollView: đặt style cho khung cuộn hay vùng nội dung?

by Suong Nguyen
09/11/2026
0

Tách style của ScrollView và contentContainerStyle để căn giữa trạng thái rỗng, đồng thời kiểm tra nội dung dài vẫn cuộn được.

0 0 votes
Article Rating
Subscribe
Login
Notify of
guest
guest
0 Comments
Oldest
Newest Most Voted
AE Dev

AE Dev mang đến các bài viết về lập trình, mobile app, backend, frontend, WordPress và công nghệ, phù hợp cho developer muốn học hỏi và cập nhật kiến thức thực tế.

Recent Posts

  • React Native Alert trên Android và hai đường hủy hộp thoại
  • Map.set có đưa khóa đã tồn tại xuống cuối không?
  • Android postInvalidate khi custom View cần lên lịch vẽ lại

Categories

  • AI
  • Backend
  • Đánh giá
  • DevOps
  • Flutter
  • Hướng dẫn
  • Lập trình Mobile
  • Phỏng vấn
  • React Native
  • Uncategorized

Weekly Newsletter

  • Buy JNews
  • Support Forum
  • Pre-sale Question
  • Contact Us

© 2026 AE Dev - Blog công nghệ, lập trình và chia sẻ kiến thức IT.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
No Result
View All Result
  • Trang chủ
  • AI
  • Mobile
  • React Native
  • Backend
  • DevOps
  • Hướng dẫn
  • Flutter

© 2026 AE Dev - Blog công nghệ, lập trình và chia sẻ kiến thức IT.

wpDiscuz
0
0
Would love your thoughts, please comment.x
()
x
| Reply