React Native Stripe SDK：如何为CardField组件的卡号输入框设置焦点

当前新版stripe-react-native的CardField组件支持程序控制触发聚焦，你可以通过组件ref调用原生暴露的focus()方法实现需求，无需依赖仅支持初始化自动聚焦的autofocus属性。

实现步骤 #

1. 声明CardField组件对应的ref引用

import { useRef } from 'react';
// 引入CardField
import { CardField } from '@stripe/stripe-react-native';

// 组件内声明ref
const cardFieldRef = useRef(null);

2. 给你的CardField组件绑定ref属性，修改后的代码如下：

<CardField
  ref={cardFieldRef}
  autofocus={true}
  postalCodeEnabled={false}
  placeholder={{
    number: '4242 4242 4242 4242',
  }}
  cardStyle={{
    backgroundColor: '#FFFFFF',
    textColor: '#000000',
  }}
  style={{
    width: '100%',
    height: 50,
    marginVertical: 30,
    padding:0
  }}
  onCardChange={(cardDetails) => {
    console.log('cardDetails', cardDetails);
    updateCardDetails(cardDetails);
  }}
  onFocus={(focusedField) => {
    console.log('focusField', focusedField);
  }}
/>

3. 需要触发聚焦时调用ref上的focus方法即可，比如按钮点击触发的示例：

<Button
  title="聚焦卡号输入框"
  onPress={() => {
    // 调用focus方法触发CardField聚焦
    cardFieldRef.current?.focus();
  }}
/>

注意事项 #

• 该功能在@stripe/stripe-react-native v0.2.0及以上版本稳定支持，如果你当前使用的SDK版本较低，建议先升级到官方稳定版再使用该方法。
• 调用focus()方法默认会聚焦到卡号输入位，如果你需要聚焦到指定字段（比如到期日、CVV），可以升级到v0.23.0及以上版本，调用focus(field: 'number' | 'expiry' | 'cvc' | 'postalCode')方法传入指定字段参数即可。

内容的提问来源于stack exchange，提问作者gabogabans