feat: 添加国家/区号选择弹窗组件

src/components/AreaCodePopup/index.tsx

+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect, useState } from 'react';
+import { ScrollView, View, Text, TouchableOpacity } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import useAppStyle from '../../hooks/useAppStyle';
+import Popup from '../Popup';
+import Radio from '../Radio';
+import styles from './styles';
+
+export type AreaCodeOption = {
+  /**
+   * 区号，唯一值
+   */
+  code: string;
+  /**
+   * 区域名称
+   */
+  name?: string;
+  /**
+   * 电话号码长度
+   */
+  phoneLength?: number;
+};
+
+interface AreaCodePopupProps {
+  /**
+   * 是否可见
+   */
+  visible: boolean;
+  /**
+   * 关闭触发事件
+   */
+  onClose?: () => void;
+  /**
+   * 选项
+   */
+  options: AreaCodeOption[];
+  /**
+   * 选中值
+   */
+  value?: AreaCodeOption;
+  /**
+   * 选择触发时间
+   */
+  onChange?: (value: AreaCodeOption) => void;
+}
+
+const AreaCodePopup: React.FC<AreaCodePopupProps> = props => {
+  const { visible, onClose, options = [], value, onChange } = props;
+
+  const [current, setCurrent] = useState('');
+
+  const myStyle = useAppStyle(styles);
+
+  const safeInset = useSafeAreaInsets();
+
+  const handleClose = () => {
+    onClose?.();
+  };
+
+  useEffect(() => {
+    if ('value' in props) {
+      if (value?.code) {
+        setCurrent(value?.code);
+      }
+    }
+  }, [value]);
+
+  const triggerChange = (next: AreaCodeOption) => {
+    if (onChange) {
+      onChange(next);
+    }
+  };
+
+  const handleAreaChange = (next: string) => {
+    setCurrent(next);
+    const entity = options.find(item => item.code === next);
+    if (entity) {
+      triggerChange(entity);
+    }
+    handleClose();
+  };
+
+  return (
+    <Popup
+      title="选择国家/地区"
+      visible={visible}
+      onClose={handleClose}
+      useModal
+    >
+      <Radio.Group value={current} onChange={handleAreaChange}>
+        <ScrollView style={myStyle['areaCodePopup-list']}>
+          {options?.map(item => (
+            <TouchableOpacity
+              key={item.code}
+              style={myStyle['areaCodePopup-list-item']}
+              activeOpacity={0.8}
+              onPress={() => handleAreaChange(item.code)}
+            >
+              <View style={myStyle['areaCodePopup-list-item-center']}>
+                <Text style={myStyle['areaCodePopup-list-item-name']}>
+                  {item.name}
+                </Text>
+                <Text style={myStyle['areaCodePopup-list-item-code']}>
+                  {item.code}
+                </Text>
+              </View>
+              <View style={myStyle['areaCodePopup-list-item-right']}>
+                <Radio
+                  value={item.code}
+                  color="transparent"
+                  swooshColor="#00A98F"
+                />
+              </View>
+            </TouchableOpacity>
+          ))}
+          <View style={{ paddingBottom: safeInset.bottom || 40 }} />
+        </ScrollView>
+      </Radio.Group>
+    </Popup>
+  );
+};
+
+export default AreaCodePopup;

src/components/AreaCodePopup/styles.ts

+import { StyleSheet } from 'react-native';
+import { ThemeStyle } from '../../constants/theme';
+import themeLayout from '../../constants/theme/layout';
+
+export default (theme: ThemeStyle) =>
+  StyleSheet.create({
+    areaCodePopup: {
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: themeLayout['padding-xs'],
+    },
+    'areaCodePopup-list': {
+      paddingHorizontal: themeLayout['padding-s'],
+      paddingTop: themeLayout['padding-s'],
+      height: 400,
+      backgroundColor: theme.colors.background,
+    },
+    'areaCodePopup-list-item': {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: themeLayout['padding-m'],
+      backgroundColor: theme.colors.background,
+      borderBottomWidth: 0.5,
+      borderBottomColor: theme.colors.border,
+    },
+    'areaCodePopup-list-item-left': {
+      alignSelf: 'flex-start',
+      marginRight: themeLayout['margin-xs'],
+    },
+    'areaCodePopup-list-item-center': {
+      flex: 1,
+      flexDirection: 'row',
+    },
+    'areaCodePopup-list-item-right': {
+      marginLeft: themeLayout['margin-s'],
+    },
+    'areaCodePopup-list-item-icon': {
+      width: 24,
+      height: 24,
+      borderRadius: 24,
+      overflow: 'hidden',
+      backgroundColor: theme.colors.primary,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    'areaCodePopup-list-item-name': {
+      fontSize: 14,
+      color: '#00A98F',
+      marginRight: themeLayout['margin-xs'],
+    },
+    'areaCodePopup-list-item-code': {
+      fontSize: 14,
+      color: theme.fonts.black1,
+    },
+  });