react-native-phone-number-input如何自动检测国家代码匹配对应国旗

• 第一步：安装地区信息读取依赖
  不需要权限即可读取系统设置的所属地区，推荐使用react-native-localize库，安装命令如下：

# npm 安装
npm install react-native-localize
# yarn 安装
yarn add react-native-localize
# iOS端需要执行pod安装
cd ios && pod install && cd ..

• 第二步：获取当前地区的国家代码
  在组件中引入依赖读取国家代码，做兜底处理避免读取失败：

import { getCountryCode } from 'react-native-localize';
import { useState, useEffect } from 'react';

// 组件内代码
const [defaultCountryCode, setDefaultCountryCode] = useState('IN');

useEffect(() => {
  const country = getCountryCode();
  // 读取成功就用获取到的国家码，失败则用默认值
  if (country) setDefaultCountryCode(country.toUpperCase());
}, []);

注意：react-native-phone-number-input要求传入ISO 3166-1 alpha-2格式的两位大写国家代码，react-native-localize返回的格式默认符合要求，不需要额外转换

• 第三步：替换PhoneInput的固定defaultCode参数
  把原代码中写死的defaultCode="IN"替换成动态的state值即可：

<PhoneInput
  ref={phoneInput}
  defaultValue={value}
  layout="first"
  onChangeFormattedText={(v) => setValue(v)}
  placeholder={' '}
  defaultCode={defaultCountryCode}
  withDarkTheme
  withShadow
  autoFocus
  containerStyle={{
    borderRadius: 0,
    width: '100%',
    height: 49,
  }}
  textInputStyle={{height: 68}}
  textContainerStyle={{paddingTop: 15}}
/>

如果需要基于用户实际GPS定位获得更精准的国家码，可以接入定位类库，获取经纬度后通过逆地理编码得到国家码即可，该方案需要向用户申请位置权限。

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