Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

使用es6语法修改了代码，并且使用了Picker组件，让其在android跟ios上都可以正常运行！ #3

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

使用es6语法修改了代码，并且使用了Picker组件，让其在android跟ios上都可以正常运行！ #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
184 changes: 77 additions & 107 deletions lib/region.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,62 @@
/**
* 省市区级联
*/
var React = require('react-native');
var webapi = require('./webapi');
var win = require('Dimensions').get('window')
var HEIGHT = win.height;
var WIDTH = win.width;

import React, {Component} from 'react';
import webapi from './webapi';

var {
import {
View,
Text,
Animated,
PickerIOS,
Picker,
StyleSheet,
TouchableOpacity
} = React;
TouchableOpacity,
Dimensions,
Platform,
} from 'react-native';

var win = Dimensions.get('window');
var HEIGHT = win.height;
var WIDTH = win.width;
//just do nothing
var noop = () => {};


var Region = React.createClass({
getDefaultProps() {
return {
//默认不显示
visible: false,
//默认显示北京(省)
selectedProvince: '110000',
//默认显示北京(市)
selectedCity: '110100',
//默认显示(区)
selectedArea: '110101',
//确定
onSubmit: noop,
//取消
onCancel: noop
}
},

export default class Region extends Component{

static defaultProps = {
//默认不显示
visible: false,
//默认显示北京(省)
selectedProvince: '110000',
//默认显示北京(市)
selectedCity: '110100',
//默认显示(区)
selectedArea: '110101',
//确定
onSubmit: noop,
//取消
onCancel: noop
};

constructor(props) {
super(props);
this.state = {
//距离顶部的距离
topValue: new Animated.Value(0),
//省
province: [],
//市
city: [],
//地区
area: [],
//选中的省
selectedProvince: this.props.selectedProvince,
//选中的市
selectedCity: this.props.selectedCity,
//选中的地区
selectedArea: this.props.selectedArea,
};
}

/**
* 改变新属性
Expand All @@ -52,8 +70,7 @@ var Region = React.createClass({
tension: 30
}).start();
}
},

}

componentWillMount() {
//开始动画
Expand All @@ -62,31 +79,7 @@ var Region = React.createClass({
friction: 10,
tension: 30
}).start();
},


/**
* 初始化状态
*/
getInitialState() {
return {
//距离顶部的距离
topValue: new Animated.Value(0),
//省
province: [],
//市
city: [],
//地区
area: [],
//选中的省
selectedProvince: this.props.selectedProvince,
//选中的市
selectedCity: this.props.selectedCity,
//选中的地区
selectedArea: this.props.selectedArea
}
},

}

componentDidMount() {
webapi
Expand Down Expand Up @@ -125,8 +118,7 @@ var Region = React.createClass({
area: area
});
});
},

}

render() {
return (
Expand All @@ -150,54 +142,49 @@ var Region = React.createClass({
{/*省市区级联*/}
<View style={styles.regionArea}>
{/*省*/}
<PickerIOS
<Picker
style={styles.regionItem}
onValueChange={this._handleProvinceChange}
selectedValue={this.state.selectedProvince}>
{this.state.province.map((v, k) => {
return (
<PickerIOS.Item value={v[0]} label={v[1]} key={k}/>
<Picker.Item value={v[0]} label={v[1]} key={k}/>
);
})}
</PickerIOS>
</Picker>

{/*市*/}
<PickerIOS
<Picker
style={styles.regionItem}
onValueChange={this._handleCityChange}
selectedValue={this.state.selectedCity}>
{this.state.city.map((v, k) => {
return (<PickerIOS.Item value={v[0]} label={v[1]} key={k}/>);
return (<Picker.Item value={v[0]} label={v[1]} key={k}/>);
})}
</PickerIOS>
</Picker>

{/*区*/}
<PickerIOS
<Picker
style={styles.regionItem}
onValueChange={this._handleAreaChange}
selectedValue={this.state.selectedArea}>
{this.state.area.map((v, k) => {
return (<PickerIOS.Item value={v[0]} label={v[1]} key={k}/>);
return (<Picker.Item value={v[0]} label={v[1]} key={k}/>);
})}
</PickerIOS>
</Picker>
</View>
</View>
</Animated.View>
);
},

}

/**
* 处理省的改变
*/
_handleProvinceChange(province) {
_handleProvinceChange = (province)=>{
//设置选中的省的名称
this._selectedProvinceName = this._data[province][0];

if (__DEV__) {
console.log('省发生改变:', province, this._selectedProvinceName);
}

//过滤出改变后，省对应的市
var city = this._filter(province);
//省下面没有市，包括台湾，香港，澳门
Expand Down Expand Up @@ -227,19 +214,14 @@ var Region = React.createClass({
area: area,
});
}
},

}

/**
* 处理市改变
*/
_handleCityChange(city) {
_handleCityChange = (city)=>{
this._selectedCityName = this._data[city][0];

if (__DEV__) {
console.log('市发生改变:', city, this._selectedCityName);
}

//过滤出市变化后，区
var area = this._filter(city);
if (area.length === 0) {
Expand All @@ -258,37 +240,30 @@ var Region = React.createClass({
area: area
});
}
},

}

/**
* 处理区域改变
*/
_handleAreaChange(area) {
_handleAreaChange = (area)=>{
this._selectAreaName = this._data[area][0];

if (__DEV__) {
console.log('区域发生改变:', area, this._selectAreaName);
}

this.setState({
selectedArea: area
})
},

}

/**
* 处理取消
*/
_handleCancel() {
_handleCancel = ()=>{
this.props.onCancel()
},

}

/**
* 处理确定
*/
_handleSubmit() {
_handleSubmit = ()=>{
this.props.onSubmit({
province: this.state.selectedProvince,
city: this.state.selectedCity,
Expand All @@ -297,13 +272,12 @@ var Region = React.createClass({
cityName: this._selectedCityName,
areaName: this._selectAreaName
})
},

}

/**
* 根据pid查询子节点
*/
_filter(pid) {
_filter = (pid)=>{
var result = [];

for (var code in this._data) {
Expand All @@ -315,10 +289,10 @@ var Region = React.createClass({

return result;
}
});

}

var styles = StyleSheet.create({
const styles = StyleSheet.create({
container: {
flex: 1,
width: WIDTH,
Expand All @@ -329,20 +303,19 @@ var styles = StyleSheet.create({
},
nav: {
height: 60,
padding: 20,
paddingHorizontal: 20,
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: 'blue',
backgroundColor: '#0c70ed',
flexDirection: 'row'
},
text: {
color: '#FFF',
fontSize: 20,
fontWeight: 'bold'
},
region: {
flex: 1,
marginTop: HEIGHT/2,
marginTop: (Platform.OS === 'ios') ? HEIGHT / 2 : HEIGHT / 1.45,
backgroundColor: '#FFF'
},
regionArea: {
Expand All @@ -351,7 +324,4 @@ var styles = StyleSheet.create({
regionItem: {
flex: 1
}
});


module.exports = Region;
});
2 changes: 1 addition & 1 deletion lib/webapi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ exports.fetchRegionData = () => {
return new Promise((resolve, reject) => {
//qianmi static CDN
fetch('http://pic.ofcard.com/themes/common/region/China_Region_Last.js')
.then((res) => res._bodyText)
.then((res) => res.text())
.then((res) => {
eval(res);
resolve(CHINA_REGION);
Expand Down