Demo: Picker

Picker component for React Native. (Android & iOS)

import React from 'react';
import { View, Button, Text, Image, Overlay } from 'react-native';

const Picker = Overlay.Picker;

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            v0: -1,
            v1: 5,
            v2: 2,
            v3: [-1, -1, -1],
            v4: [4, 7, 1]
        };
    }

    render() {
        let items = [
            { label: 'NodeJs', value: 0 },
            { label: 'C#', value: 1 },
            { label: 'Python', value: 2 },
            { label: 'Lua', value: 3 },
            { label: 'C++', value: 4 },
            { label: 'Erlang', value: 5 },
            { label: 'Java', value: 6 },
            { label: 'Visual Basic', value: 7 },
            { label: 'Object-C', value: 8 },
            { label: 'Perl', value: 9 },
            { label: 'Go', value: 10 }
        ];

        let imgItems = [
            { img: require('./g0.jpg'), value: 0 },
            { img: require('./g1.jpg'), value: 1 },
            { img: require('./g2.jpg'), value: 2 },
            { img: require('./g3.jpg'), value: 3 },
            { img: require('./g4.jpg'), value: 4 },
            { img: require('./g5.jpg'), value: 5 },
            { img: require('./g6.jpg'), value: 6 },
            { img: require('./g7.jpg'), value: 7 },
            { img: require('./g8.jpg'), value: 8 },
            { img: require('./g9.jpg'), value: 9 }
        ];

        return <View style={{paddingTop:88}}>
            <Text style={{fontSize:30, textAlign:'center', paddingBottom:20}}>Picker (select)</Text>
            <Picker value={this.state.v0}
                placeholder="Select an Item"
                placeholderColor="#666"
                items={items}
                onConfirm={(selectedVal, selectedIdx, selectedItem) => {
                    this.setState({
                        v0: selectedVal
                    });
                }}
            />

            <View style={{paddingTop:28, paddingBottom:10}}><Text style={{textAlign:'center'}}>Custom Head</Text></View>
            <Picker value={this.state.v1}
                items={items}
                head={function() {
                    return <View style={{backgroundColor:'yellow', flexDirection:'row', justifyContent:'center', alignItems:'center', paddingVertical:18}}>
                        <Text>CustomHead</Text>
                        <Button title="确定" onPress={() => {
                            // fire confirm event ==> select and close
                            this.fireConfirm();
                        }}/>
                        <Button title="关闭" onPress={() => {
                            this.close();
                        }}/>
                    </View>;
                }}
                onConfirm={(selectedVal, selectedIdx, selectedItem) => {
                    this.setState({
                        v1: selectedVal
                    });
                }}
            />

            <View style={{paddingTop:28, paddingBottom:10}}><Text style={{textAlign:'center'}}>Custom Input & Item</Text></View>
            <Picker value={this.state.v2}
                items={imgItems}
                itemStyle={{
                    height: 88 // set height of per PickerItem
                }}
                input={() => { // customize input
                    return <View style={{alignItems:'center'}}>
                        <View style={{backgroundColor:'#282828', justifyContent:'center', alignItems:'center', padding:0, borderRadius:6, borderWidth:1, borderColor:'#111', width:60, height:60}}>
                            {
                                this.state.v2 >= 0
                                &&
                                <Image source={imgItems[this.state.v2].img} resizeMode="center"/>
                                ||
                                <Text>Select</Text>
                            }
                            <Image/>
                        </View>
                    </View>;
                }}
                item={(item) => { // customize PickerItem
                    return <Image source={item.img} resizeMode="cover"/>;
                }}
                onConfirm={(selectedVal, selectedIdx, selectedItem) => {
                    this.setState({
                        v2: selectedVal
                    });
                }}
            />

            <View style={{paddingTop:28, paddingBottom:10}}><Text style={{textAlign:'center'}}>Multi Columns</Text></View>
            <Picker value={this.state.v3}
                placeholder='Select Items'
                placeholderColor='#666'
                items={{
                    columns: [
                        {
                            items: items
                        },
                        {
                            items: items
                        },
                        {
                            items: items
                        }
                    ]
                }}
                onConfirm={(selectedVals, selectedIdxs, selectedItems) => {
                    this.setState({
                        v3: selectedVals
                    });
                }}
            />

            <View style={{paddingTop:28, paddingBottom:10}}><Text style={{textAlign:'center'}}>Multi Columns & ColumnTitle</Text></View>
            <Picker value={this.state.v4}
                placeholder='Select Items'
                placeholderColor='#666'
                items={{
                    columns: [
                        {
                            title: 'Column0',
                            titleStyle: {
                                backgroundColor: '#000'
                            },
                            style: {
                                backgroundColor: '#111'
                            },
                            items: items
                        },
                        {
                            title: 'Column1',
                            items: items
                        },
                        {
                            title: 'Columnd2',
                            items: items
                        }
                    ]
                }}
                onConfirm={(selectedVals, selectedIdxs, selectedItems) => {
                    this.setState({
                        v4: selectedVals
                    });
                }}
            />
        </View>;
    }
}

export default App;