如何在React Native中创建带国家码的文本输入框？

下面是完整的带国家码的手机号输入组件实现，包含组件代码和样式：

组件代码 #

import React, { useState } from 'react';
import { View, TextInput, StyleSheet, Text, TouchableOpacity } from 'react-native';

const PhoneInput = () => {
  // 维护当前选中的国家码，支持切换
  const [selectedCountryCode, setSelectedCountryCode] = useState('+86');
  const [phoneNumber, setPhoneNumber] = useState('');

  // 可选：扩展更多国家码选项
  const countryCodes = ['+86', '+1', '+44', '+81'];

  return (
    <View style={styles.container}>
      {/* 国家码选择区域 */}
      <TouchableOpacity 
        style={styles.countryCodeWrapper}
        // 点击可触发国家码选择逻辑，示例用alert占位，实际可替换为模态框/Picker
        onPress={() => alert('此处可添加国家码选择弹窗')}
      >
        <Text style={styles.countryCodeText}>{selectedCountryCode}</Text>
      </TouchableOpacity>

      {/* 手机号输入框 */}
      <TextInput
        style={styles.phoneInput}
        placeholder="请输入手机号"
        keyboardType="phone-pad"
        value={phoneNumber}
        onChangeText={setPhoneNumber}
        placeholderTextColor="#999"
      />
    </View>
  );
};

export default PhoneInput;

样式表 #

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 10,
    backgroundColor: '#fff',
  },
  countryCodeWrapper: {
    paddingRight: 12,
    borderRightWidth: 1,
    borderRightColor: '#ccc',
    marginRight: 12,
  },
  countryCodeText: {
    fontSize: 16,
    color: '#333',
    fontWeight: '500',
  },
  phoneInput: {
    flex: 1,
    fontSize: 16,
    color: '#333',
  },
});

说明 #

• 通过横向布局将国家码区域与输入框整合，视觉上形成统一的输入组件
• 国家码区域支持点击切换，可根据需求替换为自定义选择器（如底部模态框、滚动选择器）
• 若不需要切换国家码，直接将selectedCountryCode设为固定值，移除点击逻辑即可

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