react-native中Picker动态设置数据源

来源：互联网发布：内控优化心得体会编辑：程序博客网时间：2024/06/07 05:07

本文纯原创，纯手打，请大神多多指教。转载请注明出处！
react-native版本：0.48; 开发环境win10+VScode; 最后更新时间：2017.09.15;

关于Picker官方给出的代码是这样的

<Picker  selectedValue={this.state.language}  onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>  <Picker.Item label="Java" value="java" />  <Picker.Item label="JavaScript" value="js" /></Picker>

这个数据源是写死的，并没有给出动态数据源的例子，实际操作中大部分数据源是动态的，下面给出我写的动态写法

效果图,有些地方没录下来，实际情况请自行执行代码
这里写图片描述
代码

"use strict"import React, { Component } from 'react'import {    AppRegistry,    View,    Text,    Picker,    StyleSheet} from 'react-native'// 网络获取的数据，内容必须是简单数据，不可是对象export default class Test extends Component {    constructor(props) {        super(props)        this.state = {            pickerValue: '暂无数据',            data:[]        }    }    //本人项目需要，这句代码可忽略    static navigationOptions = {        header: null    }    //模拟联网    componentWillMount(){        this.setState({            data : [                'name1',                'name2',                'name3',                'name4',                'name5',            ]        })    }    render() {        return (            <View style={styles.container}>                <Text style={styles.text}>{this.state.pickerValue}</Text>                <Picker style={styles.picker}                    selectedValue={this.state.pickerValue}                    mode={'dropdown'}  //'dialog'弹窗 'dropdown'下拉                    onValueChange={(value) => {                        this.setState({ pickerValue: value, })                        if (value == 'name5') {                           alert('处理数据')                         }                    }}>                    <Picker.Item label={'请选择'} value={'请选择'} />                    {this.state.data.map((name) => <Picker.Item label={name} value={name} />)}                </Picker>            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        alignItems: 'center',    },    text: {        marginTop: 30,        backgroundColor: 'red',        width: 200,        fontSize: 20,    },    picker: {        marginTop: 30,        backgroundColor: 'cyan',//给Picker设置背景颜色后，下拉箭头将会消失        width: 200,    },})

阅读全文

0 0