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);