rntpc_react-native-country-picker-modal:基于 React Native 的国家选择器组件项目

React Native 国家选择器

iOS	Android	Web

演示

• 🎉 前往网页演示 🎉
• Snack 示例

安装

$ yarn add react-native-country-picker-modal

基础用法

完整示例请查看 App.tsx

import React, { useState } from 'react'
import { View, Text, StyleSheet, PixelRatio, Switch } from 'react-native'
import CountryPicker from 'react-native-country-picker-modal'
import { CountryCode, Country } from './src/types'

const styles = StyleSheet.create({
  // ...
})

export default function App() {
  const [countryCode, setCountryCode] = useState<CountryCode>('FR')
  const [country, setCountry] = useState<Country>(null)
  const [withCountryNameButton, setWithCountryNameButton] = useState<boolean>(
    false,
  )
  const [withFlag, setWithFlag] = useState<boolean>(true)
  const [withEmoji, setWithEmoji] = useState<boolean>(true)
  const [withFilter, setWithFilter] = useState<boolean>(true)
  const [withAlphaFilter, setWithAlphaFilter] = useState<boolean>(false)
  const [withCallingCode, setWithCallingCode] = useState<boolean>(false)
  const onSelect = (country: Country) => {
    setCountryCode(country.cca2)
    setCountry(country)
  }
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>Welcome to Country Picker !</Text>
      <Option
        title='With country name on button'
        value={withCountryNameButton}
        onValueChange={setWithCountryNameButton}
      />
      <Option title='With flag' value={withFlag} onValueChange={setWithFlag} />
      <Option
        title='With emoji'
        value={withEmoji}
        onValueChange={setWithEmoji}
      />
      <Option
        title='With filter'
        value={withFilter}
        onValueChange={setWithFilter}
      />
      <Option
        title='With calling code'
        value={withCallingCode}
        onValueChange={setWithCallingCode}
      />
      <Option
        title='With alpha filter code'
        value={withAlphaFilter}
        onValueChange={setWithAlphaFilter}
      />
      <CountryPicker
        {...{
          countryCode,
          withFilter,
          withFlag,
          withCountryNameButton,
          withAlphaFilter,
          withCallingCode,
          withEmoji,
          onSelect,
        }}
        visible
      />
      <Text style={styles.instructions}>Press on the flag to open modal</Text>
      {country !== null && (
        <Text style={styles.data}>{JSON.stringify(country, null, 2)}</Text>
      )}
    </View>
  )
}

属性参数

• countryCode: 国家代码
• region?:地区
• subregion?: 子区域
• countryCodes?: 国家代码列表
• theme?: 主题样式
• translation?: 翻译语言代码
• modalProps?: 模态框属性
• filterProps?: 国家筛选器属性
• flatListProps?: 扁平列表属性
• withAlphaFilter?: 是否启用字母筛选（布尔值）
• withCallingCode?: 是否显示电话区号（布尔值）
• withCurrency?: 是否显示货币（布尔值）
• withEmoji?: 是否显示表情符号国旗（布尔值）
• withCountryNameButton?: 是否显示国家名称按钮（布尔值）
• withCurrencyButton?: 是否显示货币按钮（布尔值）
• withCallingCodeButton?: 是否显示电话区号按钮（布尔值）
• withFlagButton?: 是否显示国旗按钮（布尔值）
• withCloseButton?: 是否显示关闭按钮（布尔值）
• withFilter?: 是否启用筛选功能（布尔值）
• withFlag?: 是否显示国旗（布尔值）
• withModal?: 是否使用模态框模式（布尔值）
• visible?: 是否可见（布尔值）
• containerButtonStyle?: 容器按钮样式（StyleProp<ViewStyle>）
• renderFlagButton?(props: (FlagButton['props'])): 自定义国旗按钮渲染函数（国旗按钮属性）
• renderCountryFilter?(props: CountryFilter['props']): 自定义国家筛选器渲染函数（国家筛选器属性即文本输入属性）
• onSelect(country: Country): 选择国家回调函数（国家对象）
• onOpen(): 模态框打开回调
• onClose(): 模态框关闭回调
• closeButtonImage?: 关闭按钮图片源
• closeButtonStyle?: 关闭按钮样式（StyleProp）
• closeButtonImageStyle?: 关闭按钮图片样式（StyleProp）
• disableNativeModal?: 是否禁用原生模态框（需用CountryModalProvider包裹整个应用）（布尔值）
• preferredCountries: 首选国家代码 这些国家将优先显示（需关闭withAlphaFilter）

暗色主题示例

展示暗色主题CountryPicker组件的简单示例。

import CountryPicker, { DARK_THEME } from 'react-native-country-picker-modal'

const MyDarkView = () => <CountryPicker theme={DARK_THEME} />

依赖项

• world-countries : https://www.npmjs.com/package/world-countries

常见问题

是否支持并已在 Android 和 iOS 平台测试通过？

是的

安装包后，列表中的数据是否离线保存？

是的：该功能基于 world-countries 包实现，图片以 JSON 和 base64 格式存储。

使用本库的第三方库

• react-native-phone-verification

> 您的项目？

另请参阅

• react-native-linkedin

贡献者

• @xcapentier 核心开发者

问题咨询

欢迎随时联系我 或 提交 issue

用心打造

许可证

MIT

聘请专家！

寻找拥有 12 年以上经验的 ReactNative 自由职业专家？请通过我的个人网站联系！