Skip to content

R
react-native-picker
Commit c3d620bc authored by xwenliang's avatar xwenliang
Browse files
Options

data structure

parent b05f84f2
Hide whitespace changes
Inline Side-by-side
Showing with 129 additions and 235 deletions
example/PickerTest/index.android.js
View file @ c3d620bc
/** /**
* Sample React Native App * react-native-picker example for android
* https://github.com/facebook/react-native
*/ */
import React, {Component} from 'react';
import { import {
View,
Text,
TouchableOpacity,
Dimensions,
StyleSheet,
AppRegistry AppRegistry
} from 'react-native'; } from 'react-native';
import Picker from 'react-native-picker'; import PickerTest from './index.js';
function createDateData(){ AppRegistry.registerComponent('PickerTest', () => PickerTest);
let date = {}; \ No newline at end of file
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);
example/PickerTest/index.ios.js
View file @ c3d620bc
/** /**
* Sample React Native App * react-native-picker example for ios
* https://github.com/facebook/react-native
*/ */
import React, {Component} from 'react';
import { import {
View,
Text,
TouchableOpacity,
Dimensions,
StyleSheet,
AppRegistry AppRegistry
} from 'react-native'; } 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;
};
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,
},
});
AppRegistry.registerComponent('PickerTest', () => PickerTest); AppRegistry.registerComponent('PickerTest', () => PickerTest);
example/PickerTest/index.js 0 → 100644
View file @ c3d620bc
/**
* 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>
);
}
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment