react-native第三方插件native-base Picker 动态写入下拉框数据

干刚入坑,挑选了好几种第三方下拉框,还是用了base的picker
(react-native-modal-dropdown安装之后,使用没反应,可能是我react-native版本0.62版本过高,有兴趣的朋友可以去看看)

这里还要注意可能会有黄色警告出现,提示版本内置的某个props会在下个版本删除怎么怎么地。
加上这个就不会出现warning了
官方没有提供动态加载的方法,目前只能这样实现
//消除页面黄色warning console.disableYellowBox = true;

import React, { Component } from "react";
import { Container, Header, Content, Icon, Picker, Form } from "native-base";
import {Text, View} from "react-native";
const dimensions = require('Dimensions');
const {width, height} = dimensions.get('window');
export default class PickerWithIcon extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selected: undefined,
            selected1: undefined,
            dataSource: [{
                    "orderId": "6543",
                    "orderTime": "2019年8月5日14:37:27",
                    "orderName": "马云订单=================",
                    "orderState": "1"
                },
                {
                    "orderId": "gf54",
                    "orderTime": "2019年8月5日14:37:27",
                    "orderName": "马云",
                    "orderState": "2"
                },
                {
                    "orderId": "h435ds",
                    "orderTime": "2019年8月5日14:37:27",
                    "orderName": "马云",
                    "orderState": "1"
                },
                {
                    "orderId": "5jks",
                    "orderTime": "2019年8月5日14:37:27",
                    "orderName": "马云",
                    "orderState": "2"
                }],
        };
    }
    onValueChange(value: string) {
        this.setState({
            selected: value
        });
    }
    onValueChange1(value: string) {
        this.setState({
            selected1: value
        });
    }

    render() {
        let list = this.state.dataSource.map((item,i) => (
            <Picker.Item label={item.orderName} key={i} value={item.orderId} />
        ));
        return (
            <Container>
                <Content>
                    <Form>
                        <View style={
   
   {flexDirection:'row',flexWrap:'nowrap'}} >
                            <Picker style={
   
   { width:'25%'}}  mode={'dropdown'}  //'dialog'弹窗 'dropdown'下拉
                                selectedValue={this.state.selected1}  onValueChange={this.onValueChange1.bind(this)}>
                                <Picker.Item label={'企业'} value={'企业'} />
                                    {list}
                            </Picker>
                        </View>
                    </Form>
                </Content>
            </Container>
        );
    }
}

谢谢大家的观看,有问题请留言。或者加我wx16653144918
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/bojikeqian/article/details/98873299