add cascade support

Author: xwenliang

.gitignore

@@ -1 +1,7 @@
-.npmignore
+npm-debug.log
+.gitignore
+.npmignore
+.settings
+.project
+.DS_Store
+.idea

README.md

@@ -1,3 +1,123 @@
 # react-native-picker-android
-## 描述
- - ReactNative Picker for android
+
+A Picker written in pure javascript for cross-platform support
+
+Needs react-native >= 0.14.2
+
+![ui](./doc/ui.gif)
+
+###Documentation
+
+- selectedValue any
+- onValueChange function
+
+###Usage
+
+####Step 1 - install
+
+```
+	npm install react-native-picker-android --save
+```
+
+####Step 2 - import and use in project
+```
+	'use strict';
+ 
+	import React, {
+		View,
+		Text,
+		Platform,
+		PickerIOS
+	} from 'react-native';
+
+	import PickerAndroid from 'react-native-picker-android';
+
+	let Picker = Platform.OS === 'ios' ? PickerIOS : PickerAndroid;
+	let PickerItem = Picker.Item;
+
+	let 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'],
+		},
+	};
+
+	export default class SomeScene extends React.Component {
+
+		constructor(props, context){
+			super(props, context);
+			this.state = {
+				carMake: 'cadillac',
+				modelIndex: 3,
+			}
+		}
+
+		render() {
+			let make = CAR_MAKES_AND_MODELS[this.state.carMake];
+			let selectionString = make.name + ' ' + make.models[this.state.modelIndex];
+			return (
+				<View>
+					<Text>Please choose a make for your car:</Text>
+					<Picker
+						selectedValue={this.state.carMake}
+						onValueChange={(carMake) => this.setState({carMake, modelIndex: 0})}>
+						{Object.keys(CAR_MAKES_AND_MODELS).map((carMake) => (
+							<PickerItem
+								key={carMake}
+								value={carMake}
+								label={CAR_MAKES_AND_MODELS[carMake].name}
+							/>
+						))}
+					</Picker>
+					<Text>Please choose a model of {make.name}:</Text>
+					<Picker
+						selectedValue={this.state.modelIndex}
+						key={this.state.carMake}
+						onValueChange={(modelIndex) => this.setState({modelIndex})}>
+						{CAR_MAKES_AND_MODELS[this.state.carMake].models.map((modelName, modelIndex) => (
+							<PickerItem
+								key={this.state.carMake + '_' + modelIndex}
+								value={modelIndex}
+								label={modelName}
+							/>
+						))}
+					</Picker>
+					<Text>You selected: {selectionString}</Text>
+				</View>
+			);
+		}
+	};
+```
+![example](./doc/example.png)

doc/example.png

@@ -150,29 +150,35 @@ var PickerAndroid = React.createClass({
 	},
 
 	_renderItems(items) {
+		//实际显示的内容不能是value，因为value是用来检测变更的(onValueChange)
+		//某些场景的value有特殊用途，如级联菜单
+		//最好单独定义，这里跟iOS一样使用了label
+		//add by zooble @2015-12-10
 		var upItems = [], middleItems = [], downItems = [];
 		items.forEach((item, index) => {
 			upItems[index] = (  <Text 
 									style={styles.upText} 
 									onPress={() => {
 										this._moveTo(index);
 									}} >
-									{item.value}
+									{item.label}
 								</Text> );
-			middleItems[index] = ( <Text style={styles.middleText}>{item.value}</Text> );
+			middleItems[index] = ( <Text style={styles.middleText}>{item.label}</Text> );
 			downItems[index] = ( <Text 
 									style={styles.downText} 
 									onPress={() => {
 										this._moveTo(index);
 									}} >
-									{item.value}
+									{item.label}
 								</Text> );
 		});
 		return { upItems, middleItems, downItems, };
 	},
 
 	_onValueChange() {
-		this.props.onValueChange && this.props.onValueChange(this.index);
+		//实际使用中onValueChange的事件回调函数，往往需要回传当前的value
+		//add by zooble @2015-12-10
+		this.props.onValueChange && this.props.onValueChange(this.state.items[this.index].value);
 	},
 
 	render() {