• 第一步: 装依赖,把react-native-picker的依赖放在src/..."react-native-picker": "file:./src/node_modules/react-native-picker", 说明:src/node_modules是自己在src 里面创建的node_modules,跟项目自带的node_m...
    第一步:
      装依赖,把```react-native-picker```的依赖放在src/node_modules里面
    在  ```package.json```里面引入
    ```"react-native-picker": "file:./src/node_modules/react-native-picker",```
    
    ```说明:src/node_modules``` 是自己在src 里面创建的node_modules,跟项目自带的node_modules 不一样
    
    ###使用
    ```
    import React from 'react';
    import { StyleSheet, Text, View,ScrollView,Image,TextInput, TouchableOpacity, Keyboard,Alert ,NativeModules} from 'react-native'
    import Picker from 'react-native-picker'
    import area from '../../../../area.json';
    
    class MyDatumBasic extends React.Component {
        static navigationOptions = {
            title: '',     
        };
        constructor(props) {
            super(props);
            this.state={
                userCity:'',
                companyAreaArray:[]
            }
        }
    
        _createAreaData = () => {
            let data = [];
            let len = area.length;
            for(let i=0;i {
            Keyboard.dismiss();
            this.setState({isShowMengCeng: true})
            Picker.init({
                pickerData: this._createAreaData(),
                selectedValue: this.state.companyAreaArray,
                pickerConfirmBtnText: '确认',
                pickerCancelBtnText: '取消',
                pickerConfirmBtnColor: [70,123,237,1],
                pickerCancelBtnColor: [144,144,144,1],
                pickerTitleColor: [51,51,51,1],
                pickerToolBarBg: [255,255,255,1],
                pickerToolBarFontSize: 15,
                pickerBg: [245,245,245,1],
                pickerFontColor: [48,48,48,1],
                pickerFontSize: 17,
                pickerRowHeight: 48,
                pickerTitleText: '选择城市',
                onPickerConfirm: data => {
                    this.setState({
                        companyAreaArray: data,
                        userCity: data.join('-'),
                        isShowMengCeng: false,
                    })
                },
                onPickerCancel: data => {
                    this.setState({isShowMengCeng: false})
                },
            });
            Picker.show();
        }
    
      onChangedCity(text){
            this.setState({userCity:text})
        }
    
        render() {
       
            return (
                
                   
                        城市
                        this.onChangedCity(text)}
                            value={this.state.userCity}
                            underlineColorAndroid="transparent"
                            >
                        
                        
                            {this._companyAreaClickAction()}}>
                            
                            
                        
                    
                
            );
        }
    }
    
    
    select = (state) => {
        return state.user
    }
    export default connect(select)(MyDatumBasic);
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: '#FFFFFF',
            position:'relative'
        },
    con_title:{
            lineHeight:50,
            width:'20%',
            flex:2,
            paddingLeft:10,
            fontSize:15,
            color:'#333333',
    
            width:60
        },
        con_input:{
            paddingLeft:20,
            height:45,
            flex:7
            // width:'80%'
        },
        btnyz:{
            marginRight:10,
            marginTop:15
        },
        right_icon:{
            width:10,
            height:15,
        },
      
    });
    ```
    
    area.json数据结构
    
    ```
    
    [
    	{
    		"name": "北京",
    		"city": [
    			{
    				"name": "北京",
    				"area": [
    					"东城区",
    					"西城区",
    					"崇文区",
    					"宣武区",
    					"朝阳区",
    					"丰台区",
    					"石景山区",
    					"海淀区",
    					"门头沟区",
    					"房山区",
    					"通州区",
    					"顺义区",
    					"昌平区",
    					"大兴区",
    					"平谷区",
    					"怀柔区",
    					"密云县",
    					"延庆县"
    				]
    			}
    		]
    	},
    	{
    		"name": "天津",
    		"city": [
    			{
    				"name": "天津",
    				"area": [
    					"和平区",
    					"河东区",
    					"河西区",
    					"南开区",
    					"河北区",
    					"红桥区",
    					"塘沽区",
    					"汉沽区",
    					"大港区",
    					"东丽区",
    					"西青区",
    					"津南区",
    					"北辰区",
    					"武清区",
    					"宝坻区",
    					"宁河县",
    					"静海县",
    					"蓟  县"
    				]
    			}
    		]
    	},
    ]
    ```
    数据参考我主页的下一篇文章。。。。
    [城市数据请参考]([https://pan.baidu.com/s/1Qj-fxnDcnWNPlneQy-King](https://pan.baidu.com/s/1Qj-fxnDcnWNPlneQy-King))
    
    ###效果图
    
    
    ![图片.png](https://upload-images.jianshu.io/upload_images/8465718-07e91741845af279.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    
    展开全文
  • React NativePicker组件详解 2017-03-01 22:45:18
    Picker简介在iOS和Android中选择器(Picker)是常见的控件之一,比如TimePickr(Android),pickerView(ios),并且这些基本控件可以实现诸如地址选择等效果。在RN开发中,系统也为我们提供Picker控件。应用如下:...
  • 什么是PickerPicker可以在iOS和Android上渲染原生的选择器(PickerPicker基本用法 Picker selectedValue={this.state.language} onValueChange={(lang) => this.setState({language: lang})...
  • 今天早八点还架着react-native这台炫酷*炸天的R跑驰骋在我们宠趴app测试版上,突然一阵妖风,差点闪瞎我的血轮眼,一片红色报错,对应的命令端出现错误提示如下图:百思不得其解,这个插件报错了 react-native-image...
  • 先是安装 和链接 npm i react-native-...react-native link react-native-image-crop-picker android 配置 1.Gradle版本必须大于2.2,查看工程的android/build.gradle中默认gradle版本: dependencies...
  • RN使用react-native-image-picker + aliyun-oss-react-native 上传图片 今天记录一下在RN使用react-native-image-picker以及aliyun-oss-react-native完成上传图片 如果是原生和RN混合开发,首先执行以下代码: yarn...
  • github地址: https://github.com/react-native-community/react-native-image-picker 效果图: 使用步骤: 1cd 到项目目录下 ...react-native link react-native-image-picker 2在android目录下在Android...
  • 传送门 第一种方式:link  第一步:安装  1.npm install react-native-syan-image... 2.react-native link react-native-syan-image-picker  第二步:原生配置 ios TARGETS -> Build Phases -> Co...
  • npm install react-native-image-picker@latest --save link react-native link react-native-image-picker android环境配置 在Android Studio打开对应项目,进行如下操作 1.添加权限 在/android/app/src/main/...
  • react-native 第三方库 2020-06-21 15:01:25
    React-Native-Elements 一组开发RN的UI工具包(强烈推荐) ???????????????????? react-native-calendars ???????????????? 优秀的日历控件 apsl-react-native-button 定义了一个Button支持用Style来配置 ???????? ...
  • 1.第一步终端执行: npm install react-native-image-picker@latest --save 下载下来, 2.然后在文件android/settings.gradle中添加两句话: include ':react-native-image-picker' project(':react-native-...
  • 1、根据官网提供的步骤进行相应的设置 ...(2)react-native link react-native-image-crop-picker这里命令窗很不幸地始终没什么动静(除了几行字) (3)Make sure you are using Gradle 2.2.x (android/build.g...
  • reactNative之react-native-picker 2019-07-28 04:05:13
    在rn 中使用react-native-picker选择器,总结如下。 一、下载 npm install react-native-picker --save react-native link 二、安卓端配置 1.文件./android/settings.gradle中末尾添加 include ':react-...
  • https://github.com/yjy5264/react-native-roll-picker https://github.com/yjy5264/react-native-pan-drawer
  • 一、react-native-image-crop-picker开源库介绍 该库可以实现启动本地相册和照相机来采集图片,并且提供多选、图片裁剪等功能,支持iOS和Android两个平台,不同平台需要分别配置,详细的文字说明见github。 二、...
  • React-Native-picker 使用 2018-07-28 18:16:26
    项目中需要使用地址选择器和时间选择器,在react-native-picker基础上做了一个封装。 1.react-native-picker安装步骤查看: 安装步骤 2.封装代码:   /** * Created by justin on 2018/3/19. */ import ...
  • 目录: 版本说明 报错内容 解决办法 一、版本说明 本机系统: Mac react: "16.8.3" ...二、运行项目时,使用了 react-native-image-picker 插件后,构建安卓环境,报以下错误 Caused by: org.gradle.api.in
  • 这个功能使用 react-native-image-picker 库就可以很方便的实现。 1,react-native-image-picker介绍 react-native-image-picker 是一个第三方的开源库,它提供了原生的 UI 界面供用户选择图片或视频。图片或视频...
  • github示例以及详细参数:https://github.com/beefe/react-native-picker 先 安装 link ...react-native link react-native-picker 然后就可以使用了,具体看文档 例如 import Picker from 'react-...
  • 问题描述:最近做项目上传头像时用到了react-native-image-picker第三方库,使用的是 base64格式 上传,在以下配置的情况下,android点击选择相册会遇到闪退的问题,找到了问题所在,在这里分享一下解决办法。...
1 2 3 4 5 ... 20
收藏数 1,553
精华内容 621