React Native Picker (多列数据)

**? Sample React Native App?
 *  https://github.com/facebook/react-native?
 *  @flow? */


"use strict"

import React,{Component} from 'react'
import {
    AppRegistry,View,Text,Picker,StyleSheet
} from 'react-native'

var FirstData = [
    '1','2','3','4','5','6'
]
var SecondData = [
    '11','22','33','44','55','66'
]
var ThirdData = [
    '111','222','333','444','555','666'
]

// 读取本地json文件(城市选择器,后续更新)
let jsonData = require('./area.json')

class HelloWorld extends Component {

    constructor(props) {
        super(props)

        this.state={

            firstValue:  FirstData[0],secondValue: SecondData[0],thirdValue:  ThirdData[0],}
    }


    updateFirstValue(language) {

        this.setState({
            firstValue: language,})
    }
    updateSecondValue(language) {

        this.setState({
            secondValue: language,})
    }
    updateThirdValue(language) {

        this.setState({
            thirdValue: language,})
    }


    renderPicker(key,i) {

        console.log(key,i)

        return <Picker.Item key={i} label={key} value={key} />
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>{this.state.firstValue+this.state.secondValue+this.state.thirdValue}</Text>
                <View style={styles.pickerViewContainer}>
                    <Picker style={styles.pickerStyle}
                            selectedValue={this.state.firstValue}
                            onValueChange={(language) => this.updateFirstValue(language)}>
                        {FirstData.map((key,i) => this.renderPicker(key,i))}
                    </Picker>
                    <Picker style={styles.pickerStyle}
                            selectedValue={this.state.secondValue}
                            onValueChange={(language) => this.updateSecondValue(language)}>
                        {SecondData.map((key,i))}
                    </Picker>
                    <Picker style={styles.pickerStyle}
                            selectedValue={this.state.thirdValue}
                            onValueChange={(language) => this.updateThirdValue(language)}>
                        {ThirdData.map((key,i))}
                    </Picker>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({

    container: {
        flex: 1,justifyContent: 'center',alignItems: 'center',flexDirection: 'column',backgroundColor: '#F5FCFF'
    },text: {
        width: 200,height: 60,marginTop: 100,backgroundColor: 'white',justifyContent:'center',borderRadius: 5,},pickerViewContainer: {
        flex: 1,flexDirection: 'row',paddingTop: 30

    },pickerStyle: {
        flex: 1,}
})


AppRegistry.registerComponent('HelloWorld',() => HelloWorld);


******************************  知识点  ******************************

1.实现多列：把 3 个picker放在同一个View上；
2.排列方式为： row ；
3.flex设置为： 1（各占三分之一并充满父组件）；

******************************  效果图  ******************************

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!