import React, { Component } from 'react';
import { 
  View,
  Text,
  Picker,
  PickerIOS,
  ScrollView,
} 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-Rameo",
    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 PickerView extends Component {
  constructor(props) {
    super(props);
    this.state = {
        language:"java",
        languageIndex:0,
        selectCourse:'java',
        selectIndex:1,
        carMake:"cadillac",
        modelIndex: 3,
    };
    console.log(this.props.value1)
    console.log("----",Object.keys(CAR_MAKES_AND_MODELS))  //打印字典的所有key值
  }

  

  render() {
    var make = CAR_MAKES_AND_MODELS[this.state.carMake];
    var selectionString = make.name + '' + make.models[this.state.modelIndex]
    return (
      <ScrollView>
      <Text style={{fontSize: 16,}}>{this.state.language}+"__"+{this.state.languageIndex}</Text>
          <Picker
             selectedValue={this.state.language}
             onValueChange={ (lang,index) => this.setState({language:lang,languageIndex:index})}
          >
         <Picker.Item label="Java" value="java"></Picker.Item>
         <Picker.Item label="JaveScript" value="js"></Picker.Item>
        </Picker>

      <Text style={{fontSize: 16,}}>"简单的PickerIos"+{this.state.selectCourse}+"__"+{this.state.selectIndex}</Text>
        <PickerIOS
          itemStyle={{fontSize:25,color:'red',textAlign:'center',fontWeight:'bold'}}
          selectedValue={this.state.selectCourse}
          onValueChange={(selectedCourse, selectedIndex) => {this.setState({selectCourse:selectedCourse, selectIndex:selectedIndex})}}
        >
          <PickerItemIOS
            key='0'
            value="C++"
            label="c++"
          ></PickerItemIOS>
           <PickerItemIOS
              key='1'
              value='Java'
              label='java'
            />
            <PickerItemIOS
              key='2'
              value='Android'
              label='android'
            />
             <PickerItemIOS
              key='3'
              value='IOS'
              label='iOS'
            />
             <PickerItemIOS
              key='4'
              value='React Native'
              label='react Native'
            />
            <PickerItemIOS
              key='5'
              value='Swift'
              label='swift'
            />
            <PickerItemIOS
              key='5'
              value='.Net'
              label='.net'
            />
        </PickerIOS>



         <Text style={{fontSize: 25,}}>please choose a make for your car:{this.state.carMake}</Text>
        <PickerIOS
          selectedValue={this.state.carMake}
          onValueChange={ (item) => this.setState({carMake:item,modelIndex: 0})}
        >
        {/* 这里是有map函数变量了CAR_MAKES_AND_MODELS对象中的keys值 ,label显示对应key值的name属性 */}
        {Object.keys(CAR_MAKES_AND_MODELS).map( (itemKey) => (
          <PickerItemIOS 
            key={itemKey}
            value={itemKey}
            label={CAR_MAKES_AND_MODELS[itemKey].name}  
          />
        ))}
        </PickerIOS>

        <Text style={{fontSize: 25,}}>please choose a model of :{make.name}</Text>
        <PickerIOS
          selectedValue={this.state.modelIndex}
          key={this.state.carMake}  
          onValueChange={ (index) => {this.setState({modelIndex:index})}}
        >
        {/* 这里map遍历的是models数组，modelName为数组的value，modelIndex数组位置 */}
          {CAR_MAKES_AND_MODELS[this.state.carMake].models.map( (modelName,modelIndex) => (
            <PickerItemIOS
            key={this.state.carMake + "_" + modelIndex}
            value={modelIndex}
            label={modelName}
          ></PickerItemIOS>
          ))}
        </PickerIOS>
        
      </ScrollView>
    );
  }
}

export default PickerView;

Simulator Screen Shot - iPhone 6 - 2018-11-01 at 11.49.14.png