React Native Picker (逐个添加数据、array循环添加数据)

Z时代
2024-01-10
分类：综合

react

/**
 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 PickerData = [
    '11',
    '22',
    '33',
    '44',
    '55',
    '66'
]

class HelloWorld extends Component {

    constructor(props) {
        super(props)

        this.state={
            firstPickerValue: '1',
            secondPickerValue: PickerData[0],
        }
    }

    updateFirstContent(language) {

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

    updateSecondContent(language) {

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

    /* 必须有这个 key , 详细请参考 scrollview 博文
     * 也可以 <Picker.Item label='key' value='value' /> 此段代码直接放在Picker组件内,
     * 这样就是一条一条的添加,不是通过已知数组循环添加
     *  */
    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.firstPickerValue}</Text>
                <Picker ref='firstPicker'
                        selectedValue={this.state.firstPickerValue}
                        onValueChange={(language) => this.updateFirstContent(language)}>
                    <Picker.Item label='1' value='1' />
                    <Picker.Item label='2' value='2' />
                    <Picker.Item label='3' value='3' />
                    <Picker.Item label='4' value='4' />
                    <Picker.Item label='5' value='5' />
                </Picker>
                <Text style={styles.text}>{this.state.secondPickerValue}</Text>
                <Picker selectedValue={this.state.secondPickerValue}
                        onValueChange={(language) => this.updateSecondContent(language)}>
                    {PickerData.map((key, i) => this.renderPicker(key, i))}
                </Picker>
            </View>
        );
    }
}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    text: {
        width: 200,

        height: 60,
        backgroundColor: 'white',

        justifyContent:'center',

        alignItems: 'center',

        borderRadius: 5,
    },
    picker:{
        padding: 50

    }
})


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