Cách dễ dàng để thêm một trường mã xác nhận vào Ứng dụng React Native của bạn

react-native-confirmation-code-field

Một trường mã xác nhận đơn giản cho React Native tương thích với iOS và Android.

Liên kết

• Tài liệu
• Ứng dụng mẫu
• Live Expo app

Tính năng của thành phần:

• 🔮 Đơn giản và nhỏ gọn 1,55 KB. Dễ sử dụng;
• 🚮 Xóa một phần của mã bằng cách nhấp vào ô;
• 🍎 Hỗ trợ “dán mã SMS nhanh” trên iOS. Và dán mã tùy chỉnh cho Android;
• ⚡ Hỗ trợ ref cho TextInput;
• 🛠 Có thể tùy chỉnh mạnh mẽ. Có thể sử dụng như TextInput có mask;
• 🤓 Lịch sử thay đổi đọc được.

Ảnh chụp màn hình

|
—|—
|

Cài đặt

# For React Native 0.64.x and above
yarn add react-native-confirmation-code-field


# If you need React Native 0.63.x and below
yarn add react-native-confirmation-code-field@6

Cách hoạt động

Tôi sử dụng một thành phần <TextInput/> ẩn sẽ được kéo dài qua các thành phần <Cell/>.

Cấu trúc JSX trông như thế này:

// Root view (rectangle with a red border on 3d visualization below)
<View style={rootStyle}>
  // Each Cell element is result of a `renderCell` function (gray boxes)
  <Cell>1</Cell>
  <Cell>2</Cell>
  <Cell>3</Cell>
  <Cell>|</Cell>
  <Cell></Cell>
  <Cell></Cell>
  // Invisible Text Input with absolute position (gray rectangle with text '123')
  <TextInput value="123" />
</View>

Nó cần giải quyết các vấn đề sau:

• Khi người dùng dán mã từ SMS trên iOS issue#25
• UX tốt hơn khi người dùng gõ nhanh hoặc hệ thống chậm, các ký tự có thể bị mất khi thành phần chuyển trọng tâm giữa các <TextInput/>.

Ví dụ cơ bản

Tôi đã tiếp cận việc triển khai tối thiểu. Điều này có nghĩa rằng thành phần này cung cấp chức năng cấp thấp để bạn có thể tạo giao diện người dùng tuyệt vời mà không cần khóc 😭. Tôi khuyên bạn nên bắt đầu bằng cách tạo lớp bọc của riêng bạn nơi bạn áp dụng tất cả các kiểu dáng và cấu hình cơ bản.

Bạn có thể sử dụng một giải pháp có sẵn ngay từ đầu:

• Biến thể có hiệu ứng
• Ví dụ về định dạng
• Biến thể gạch chân
• Hiển thị và ẩn mật khẩu

• Biến thể mask

  import React, {useState} from ‘react’;
  import {SafeAreaView, Text, StyleSheet} from ‘react-native’;

  import {
  CodeField,
  Cursor,
  useBlurOnFulfill,
  useClearByFocusCell,
  } from ‘react-native-confirmation-code-field’;

  const styles = StyleSheet.create({
  root: {flex: 1, padding: 20},
  title: {textAlign: ‘center’, fontSize: 30},
  codeFieldRoot: {marginTop: 20},
  cell: {
  width: 40,
  height: 40,
  lineHeight: 38,
  fontSize: 24,
  borderWidth: 2,
  borderColor: ‘#00000030’,
  textAlign: ‘center’,
  },
  focusCell: {
  borderColor: ‘#000’,
  },
  });

  const CELL_COUNT = 6;

  const App = () => {
  const [value, setValue] = useState(”);
  const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT});
  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
  value,
  setValue,
  });

  return (
  
  Verification
  caretHidden={false} when users can’t paste a text value, because context menu doesn’t appear
  value={value}
  onChangeText={setValue}
  cellCount={CELL_COUNT}
  rootStyle={styles.codeFieldRoot}
  keyboardType=”number-pad”
  textContentType=”oneTimeCode”
  renderCell={({index, symbol, isFocused}) => (
  
  {symbol || (isFocused ? : null)}
  
  )}
  />
  
  );
  };

  export default App;

Chi tiết tải về:

Tác giả: retyui
Nguồn: https://github.com/retyui/react-native-confirmation-code-field

Giấy phép: MIT license