React Native 中如何实现仅选国家代码且不显示国旗图标

解决方案 #

1. 隐藏国旗图标

你使用的PhoneInput组件默认支持隐藏国旗配置，直接在组件属性中添加showFlag={false}即可关闭国旗显示。如果该属性不匹配你使用的组件版本，可通过强制样式隐藏国旗元素：

<PhoneInput
  // 其他原有属性保留
  showFlag={false}
  // 若上面属性不生效，添加下面的flagStyle配置
  flagStyle={{ display: 'none', width: 0, marginHorizontal: 0 }}
/>

2. 调整组件宽度

直接在你已经配置的containerStyle中添加宽度控制参数即可，支持固定宽度、百分比、弹性宽度等多种写法：

<PhoneInput
  containerStyle={{ 
    marginRight: 5,
    width: 250, // 可替换为 '100%' 或者 flex: 1 适配布局需求
  }}
  // 其他原有属性保留
/>

完整修改后示例代码

<PhoneInput
  containerStyle={{ 
    marginRight: 5,
    width: '70%', // 根据你的需求调整宽度值
  }}
  ref={phoneInputRef}
  placeholder="Enter phone number"
  defaultValue={phone}
  multiline={false}
  disabled={!editable}
  layout="first"
  onChangeText={(newValue) => {
    setPhoneNumberError('');
    setPhone(newValue);
  }}
  withDarkTheme
  withShadow
  autoFocus
  showFlag={false} // 隐藏国旗
/>
</View>

如果以上配置没有生效，可确认你安装的PhoneInput组件的具体包名，不同封装包的属性名会有细微差异，比如部分版本的属性为disableFlag={true}，替换对应属性即可。

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