kylefang/react-native-picker
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-picker.git synced 2026-05-24 09:14:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

data structure

Browse Source
This commit is contained in:
xwenliang
2016-09-20 17:03:50 +08:00
parent b05f84f2b3
commit c3d620bc63
3 changed files with 129 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
example/PickerTest/index.android.js
View File

@@ -1,102 +1,11 @@
/**
* Sample React Native App
* https://github.com/facebook/react-native
* react-native-picker example for android
*/
import React, {Component} from 'react';
import {
View,
Text,
TouchableOpacity,
Dimensions,
StyleSheet,
AppRegistry
} from 'react-native';
import Picker from 'react-native-picker';
import PickerTest from './index.js';
function createDateData(){
let date = {};
for(let i=1950;i<2050;i++){
let month = {};
for(let j = 1;j<13;j++){
let day = [];
if(j === 2){
for(let k=1;k<29;k++){
day.push(k+'日');
}
}
else if(j in {1:1, 3:1, 5:1, 7:1, 8:1, 10:1, 12:1}){
for(let k=1;k<32;k++){
day.push(k+'日');
}
}
else{
for(let k=1;k<31;k++){
day.push(k+'日');
}
}
month[j+'月'] = day;
}
date[i+'年'] = month;
}
return date;
};
class PickerTest extends Component {
constructor(props, context) {
super(props, context);
}
_onPressHandle() {
Picker.init({
pickerData: createDateData(),
selectedValue: ['2015年', '12月', '12日'],
onPickerConfirm: pickedValue => {
alert(JSON.stringify(pickedValue));
console.log(pickedValue);
},
onPickerCancel: pickedValue => {
alert(JSON.stringify(pickedValue));
console.log(pickedValue);
},
onPickerSelect: pickedValue => {
alert(JSON.stringify(pickedValue));
console.log(pickedValue);
}
});
Picker.show();
}
render() {
return (
<View style={{height: Dimensions.get('window').height}}>
<TouchableOpacity style={{marginTop: 20}} onPress={this._onPressHandle.bind(this)}>
<Text>Click Me</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('PickerTest', () => PickerTest);
AppRegistry.registerComponent('PickerTest', () => PickerTest);

143
example/PickerTest/index.ios.js
View File

@@ -1,150 +1,11 @@
/**
* Sample React Native App
* https://github.com/facebook/react-native
* react-native-picker example for ios
*/
import React, {Component} from 'react';
import {
View,
Text,
TouchableOpacity,
Dimensions,
StyleSheet,
AppRegistry
} from 'react-native';
import Picker from 'react-native-picker';
function createDateData(){
let date = {};
for(let i=1950;i<2050;i++){
let month = {};
for(let j = 1;j<13;j++){
let day = [];
if(j === 2){
for(let k=1;k<29;k++){
day.push(k+'日');
}
}
else if(j in {1:1, 3:1, 5:1, 7:1, 8:1, 10:1, 12:1}){
for(let k=1;k<32;k++){
day.push(k+'日');
}
}
else{
for(let k=1;k<31;k++){
day.push(k+'日');
}
}
month[j+'月'] = day;
}
date[i+'年'] = month;
}
return date;
};
function createAreaData(callback){
fetch('https://raw.githubusercontent.com/beefe/react-native-picker/master/example/PickerTest/area.json').then(res => {
res.json().then(area => {
let data = {};
let len = area.length;
for(let i=0;i<len;i++){
let city = area[i]['city'];
let cityLen = city.length;
let ProvinceName = area[i]['name'];
data[ProvinceName] = {};
for(let j=0;j<cityLen;j++){
let area = city[j]['area'];
let cityName = city[j]['name'];
data[ProvinceName][cityName] = area;
}
}
callback(data);
});
}, err => {
console.log(err);
});
};
class PickerTest extends Component {
constructor(props, context) {
super(props, context);
}
_showDatePicker() {
Picker.init({
pickerData: createDateData(),
selectedValue: ['2015年', '12月', '12日'],
onPickerConfirm: pickedValue => {
alert(JSON.stringify(pickedValue));
console.log(pickedValue);
},
onPickerCancel: pickedValue => {
alert(JSON.stringify(pickedValue));
console.log(pickedValue);
},
onPickerSelect: pickedValue => {
alert(JSON.stringify(pickedValue));
console.log(pickedValue);
}
});
Picker.show();
}
_showAreaPicker() {
createAreaData(data => {
Picker.init({
pickerData: data,
selectedValue: ['北京', '北京', '朝阳区'],
onPickerConfirm: pickedValue => {
alert(JSON.stringify(pickedValue));
console.log(pickedValue);
},
onPickerCancel: pickedValue => {
alert(JSON.stringify(pickedValue));
console.log(pickedValue);
},
onPickerSelect: pickedValue => {
alert(JSON.stringify(pickedValue));
console.log(pickedValue);
}
});
Picker.show();
});
}
render() {
return (
<View style={{height: Dimensions.get('window').height}}>
<TouchableOpacity style={{marginTop: 40, marginLeft: 20}} onPress={this._showDatePicker.bind(this)}>
<Text>DatePicker</Text>
</TouchableOpacity>
<TouchableOpacity style={{marginTop: 40, marginLeft: 20}} onPress={this._showAreaPicker.bind(this)}>
<Text>AreaPicker</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
import PickerTest from './index.js';
AppRegistry.registerComponent('PickerTest', () => PickerTest);

124
example/PickerTest/index.js Normal file
View File

@@ -0,0 +1,124 @@
/**
* Bootstrap of PickerTest
*/
import React, {Component} from 'react';
import {
View,
Text,
TouchableOpacity,
Dimensions
} from 'react-native';
import Picker from 'react-native-picker';
function createDateData(){
let date = {};
for(let i=1950;i<2050;i++){
let month = {};
for(let j = 1;j<13;j++){
let day = [];
if(j === 2){
for(let k=1;k<29;k++){
day.push(k+'日');
}
}
else if(j in {1:1, 3:1, 5:1, 7:1, 8:1, 10:1, 12:1}){
for(let k=1;k<32;k++){
day.push(k+'日');
}
}
else{
for(let k=1;k<31;k++){
day.push(k+'日');
}
}
month[j+'月'] = day;
}
date[i+'年'] = month;
}
return date;
};
function createAreaData(callback){
fetch('https://raw.githubusercontent.com/beefe/react-native-picker/master/example/PickerTest/area.json').then(res => {
res.json().then(area => {
let data = {};
let len = area.length;
for(let i=0;i<len;i++){
let city = area[i]['city'];
let cityLen = city.length;
let ProvinceName = area[i]['name'];
data[ProvinceName] = {};
for(let j=0;j<cityLen;j++){
let area = city[j]['area'];
let cityName = city[j]['name'];
data[ProvinceName][cityName] = area;
}
}
callback(data);
});
}, err => {
console.log(err);
});
};
export default class PickerTest extends Component {
constructor(props, context) {
super(props, context);
}
_showDatePicker() {
Picker.hide();
Picker.init({
pickerData: createDateData(),
selectedValue: ['2015年', '12月', '12日'],
onPickerConfirm: pickedValue => {
alert(JSON.stringify(pickedValue));
console.log(pickedValue);
},
onPickerCancel: pickedValue => {
alert(JSON.stringify(pickedValue));
console.log(pickedValue);
},
onPickerSelect: pickedValue => {
alert(JSON.stringify(pickedValue));
console.log(pickedValue);
}
});
Picker.show();
}
_showAreaPicker() {
createAreaData(data => {
Picker.init({
pickerData: data,
selectedValue: ['北京', '北京', '朝阳区'],
onPickerConfirm: pickedValue => {
console.log(pickedValue);
},
onPickerCancel: pickedValue => {
console.log(pickedValue);
},
onPickerSelect: pickedValue => {
console.log(pickedValue);
}
});
Picker.show();
});
}
render() {
return (
<View style={{height: Dimensions.get('window').height}}>
<TouchableOpacity style={{marginTop: 40, marginLeft: 20}} onPress={this._showDatePicker.bind(this)}>
<Text>DatePicker</Text>
</TouchableOpacity>
<TouchableOpacity style={{marginTop: 10, marginLeft: 20}} onPress={this._showAreaPicker.bind(this)}>
<Text>AreaPicker</Text>
</TouchableOpacity>
</View>
);
}
};