干刚入坑,挑选了好几种第三方下拉框,还是用了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