PickerIOS

PickerIOS是只能在iOS上使用的选择组件，对应iOS平台上的UIPickerView。中文网上详细的使用demo http://reactnative.cn/docs/0.26/pickerios.html#content，但如果只是按着demo敲的话发现PickerIOS组件显示不出来。发现demo上没有使用itemStyle这一属性。

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

var PickerItemIOS = PickerIOS.Item;

var CAR_MAKES_AND_MODELS = {
  amc: {
    name:'AMC',
    models:['AMX','Concord','Eagle','Gremlin','Matador','Pacer']
  },
  alfa: {
    name:'Alfa-Romeo',
    models:['159','4C','Alfasud','Brera','GTV6','Giulia','MiTo','Spider']
  },
  aston: {
    name:'Aston Martin',
    models:['DB5','DB9','DBS','Rapide','Vanquish','Vantage']
  },
  audi: {
    name:'Audi',
    models:['90','4000','5000','A3','A4','A5','A6','A7','A8','Q5','Q7']
  },
  austin: {
    name:'Austin',
    models:['America','Maestro','Maxi','Mini','Montego','Princess']
  },
  borgward: {
    name:'Borgward',
    models:['Hansa','Isabella','P100']
  },
  buick: {
    name:'Buick',
    models:['Electra','LaCrosse','LeSabre','Park Avenue','Regal','Roadmaster','Skylark']
  },
  cadillac: {
    name:'Cadillac',
    models:['Catera', 'Cimarron', 'Eldorado', 'Fleetwood', 'Sedan de Ville']
  },
  chevrolet: {
    name: 'Chevrolet',
    models: ['Astro', 'Aveo', 'Bel Air', 'Captiva', 'Cavalier', 'Chevelle',
      'Corvair', 'Corvette', 'Cruze', 'Nova', 'SS', 'Vega', 'Volt']
  }
};

class PickerIOSDemo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      carMake:'cadillac',
      modelIndex:3
    }
  }

  render() {
    var make = CAR_MAKES_AND_MODELS[this.state.carMake];
    var selectionString = make.name + ' ' + make.models[this.state.modelIndex];
    return (
      <View style={styles.container}>
       <Text>Please choose a make for your car:</Text>
        <PickerIOS
        //demo上没有设置该属性，导致无法显示
            itemStyle={{width: 200,height: 200}}
            selectedValue={this.state.carMake}
            onValueChange={(carMake) => this.setState({carMake:carMake,modelIndex:0})}>
            {Object.keys(CAR_MAKES_AND_MODELS).map((carMake) =>(
                <PickerItemIOS
                    key={carMake}
                    value={carMake}
                    label={CAR_MAKES_AND_MODELS[carMake].name}
                />
            ))}
        </PickerIOS>
        <Text>Please choose a model of {make.name}</Text>
        <PickerIOS
        //demo上没有设置该属性，导致无法显示
            itemStyle={{width: 200,height: 200}}
            selectedValue={this.state.modelIndex}
            key={this.state.carMake}
            onValueChange={(modelIndex) => this.setState({modelIndex:modelIndex})}>
          {CAR_MAKES_AND_MODELS[this.state.carMake].models.map((modelName,modelIndex) => (
              <PickerItemIOS
                  key={this.state.carMake + '_' + modelIndex}
                  value={modelIndex}
                  label={modelName}
              />
          ))}
        </PickerIOS>
        <Text>You selected: {selectionString}</Text>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  }
});

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