React Native 城市选择（二）使用三方库实现-白红宇的个人博客

发布日期：2022-04-05 00:52:16 浏览次数：4 分类：博客文章

本文共 1584 字，大约阅读时间需要 5 分钟。

经过导包之路后终于能顺利运行，先看下效果，然后简述下遇到的小问题

话不多说，上代码

import { List, Picker, Provider } from '@ant-design/react-native';// 引入三方城市库import datacity from '@bang88/china_city_data';// 自定义城市选择组件const CustomChildren = (props) => (    
            
                 
      
       {props.extra}
                  
              
         
    );export interface IState {    // 数据源    data: [],    // 选中城市编码    value: [],}export interface IProps extends IBasePageProp {}export default class extends UtilsRootPage
    
      {    onPress!: () => void;    format: ((labels: string[]) => string) | undefined;    onOk: ((value: any) => void) | undefined;    subPageInit() {        this.state = {            data: [],            value: [],        }// 弹起选择框操作        this.onPress = () => {            this.setState({                data: datacity,            });        };// 点击确定回调（返回的是城市编码）        this.onOk = value => {            this.setState({ value });        };// 显示样式回调        this.format = (labels: string[]) => {            let kk = labels.join(' ')            // 网络接口，我们的需求是传入城市名称            this.listData(kk)            return kk;        };       }    subPageRender() {        return (            
     
                      {/* 选择组件 */}                
      
                           {/* 地区选择 */}                    
                               
                            
                       
                  
             );    }    //  筛选列表信息    private listData(city:string) {        console.warn(city);    }}

简述下需要注意的点：

选中后展示的文本在extra这个字段中，但是我们无法取得（onChange，onOk，value中返回的都是编码值），只能在format中截获

转载地址：https://www.cnblogs.com/lijianyi/p/14304168.html 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：React Native 城市选择（三）实现选择全部功能（使用本地json文件实现）

下一篇：React Native 城市选择（一）城市数据三方库引入

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章