React Native 城市选择（二）使用三方库实现

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

 话不多说，上代码

import { List, Picker, Provider } from '@ant-design/react-native';
// 引入三方城市库
import datacity from '@bang88/china_city_data';
// 自定义城市选择组件
const CustomChildren = (props) => (
    <TouchableOpacity onPress={props.onPress}>
        <View style={style.item_center_left_bg}>
            <Text style={style.item_left_title} numberOfLines={1}>{props.extra}</Text>
            <Image style={style.item_right_img} source={require('../../image/pack_back.png')} />

        </View>
    </TouchableOpacity>
);
export interface IState {
    // 数据源
    data: [],
    // 选中城市编码
    value: [],
}

export interface IProps extends IBasePageProp {

}

export default class extends UtilsRootPage<IProps, IState> {
    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 (
            <View style={style.container}> 
               {/* 选择组件 */}
                <View style={style.item_center_bg}>
                    {/* 地区选择 */}
                    <Picker
                        data={datacity}
                        cols={2}
                        format={this.format}
                        value={this.state.value}
                        onOk={this.onOk}
                        title={'选择工作地'}
                    >
                        <CustomChildren></CustomChildren>

                    </Picker>

                </View>
            </View>
        );
    }

    //  筛选列表信息
    private listData(city:string) {
        console.warn(city);

    }
}

简述下需要注意的点：

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