本文主要为大家详细介绍了react native仿地址挑选器功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
产品经理：“你明白吧，这里向右划可以出菜单，然后需要一个闪烁的动画，还有，我想这个tab可以拉下来，你懂吧？
设计师：“别废话，把你要抄的产品给我看下。”
…
接下来，我们仿一下别人家的地址挑选器
import react, { component, proptypes } from 'react';
import {
viewproptypes,
stylesheet,
view,
touchableopacity,
touchablenativefeedback,
platform,
animated,
text
} from 'react-native';
export default class selectcitytabbar extends component {
//属性声名
static proptypes = {
gotopage: proptypes.func,
activetab: proptypes.number,
tabs: proptypes.array,
backgroundcolor: proptypes.string,
activetextcolor: proptypes.string,
inactivetextcolor: proptypes.string,
textstyle: text.proptypes.style,
tabstyle: viewproptypes.style,
rendertab: proptypes.func,
underlinestyle: viewproptypes.style,
};
//默认属性
static defaultprops = {
activetextcolor: '#fa3d4f',
inactivetextcolor: 'black',
backgroundcolor: null,
}
rendertab(name, page, istabactive, onpresshandler) {
const { activetextcolor, inactivetextcolor, textstyle, } = this.props;
const textcolor = istabactive ? activetextcolor : inactivetextcolor;
const fontweight = istabactive ? 'bold' : 'normal';
const viewstyle = istabactive ? [styles.tab, { borderbottomwidth: constant.sizepiderlarge, bordercolor: constant.colorprimary }] : styles.tab;
if (platform.os !== 'ios') {
return <touchablenativefeedback
delaypressin={0}
background={touchablenativefeedback.selectablebackground()}
key={name + page}
accessible={true}
accessibilitylabel={name}
accessibilitytraits='button'
onpress={() => onpresshandler(page)}
>
<view style={viewstyle}>
<text style={[{ color: textcolor, fontweight, }, textstyle,]}>
{name}
</text>
</view>
</touchablenativefeedback>
}
return <touchableopacity
key={name + page}
accessible={true}
accessibilitylabel={name}
accessibilitytraits='button'
onpress={() => onpresshandler(page)}
>
<view style={viewstyle}>
<text style={[{ color: textcolor, fontweight, }, textstyle,]}>
{name}
</text>
</view>
</touchableopacity>;
}
render() {
return (
<view style={{ flexdirection: 'row', borderbottomwidth: constant.sizepidernormal, bordercolor: constant.colorpider }}>
{this.props.tabs.map((name, page) => {
const istabactive = this.props.activetab === page;
const rendertab = this.props.rendertab || this.rendertab;
return this.rendertab(name, page, istabactive, this.props.gotopage);
})}
</view>
);
}
}
const styles = stylesheet.create({
tab: {
alignitems: 'center',
justifycontent: 'center',
paddingbottom: 10,
marginleft: 10,
},
tabs: {
height: 50,
flexdirection: 'row',
justifycontent: 'space-around',
borderwidth: 1,
bordertopwidth: 0,
borderleftwidth: 0,
borderrightwidth: 0,
bordercolor: '#ccc',
},
});
npm react-native-scrollable-tab-view 组件
import react, { component } from 'react';
import {
stylesheet,
view,
scrollview,
dimensions,
touchableopacity,
interactionmanager,
platform,
uimanager,
text
} from 'react-native';
import scrollabletabview from 'react-native-scrollable-tab-view';
import selectcitytabbar from './selectcitytabbar'
import area_json from '../../util/area.json';
const { height, width } = dimensions.get('window');
export default class addressselect extends component {
static defaultprops = {
commitfun: function (value) {
console.log(value);
},
dissmissfun: function () {
},
lastaddress: null,
};
constructor(props) {
super(props);
if (platform.os === 'android') {
uimanager.setlayoutanimationenabledexperimental(true)
}
const { lastaddress } = props;
let selectaddress = this.initaddress(lastaddress);
this.state = {
selectaddress
}
}
initaddress(lastaddress) {
let selectaddress = [
{
value: null,
label: null,
children: area_json,
}, {
value: null,
label: null,
children: null,
}, {
value: null,
label: null,
children: null,
}];
let array = null;
function fun(array, value) {
for (let item of array) {
if (item.value + '' === value + '') {
return item;
}
}
}
try {
selectaddress = selectaddress.map((item, index) => {
let result = fun(array ? array : area_json, lastaddress[index].value);
if (result.children) {
array = result.children;
}
return result;
});
} catch (e) {
console.log('-----e-', e);
}
return selectaddress
}
/**
* 列表行
* @param item
* @param i
* @returns {xml}
*/
renderlistitem(item, i) {
let itemstyle = styles.itemstyle;
let textstyle = styles.itemtext;
let { selectaddress } = this.state;
if (item.label === selectaddress[i].label) {
itemstyle = [itemstyle];
textstyle = [textstyle, { color: 'red' }]
}
return (
<touchableopacity
style={itemstyle}
key={i + item.label}
onpress={() => {
this.pressitem(item, i)
}}
>
<text style={textstyle}>{item.label}</text>
</touchableopacity>
)
}
/**
* 点击列表事件
* @param item 选中数据
* @param i 选中行数
*/
pressitem(item, i) {
let { selectaddress } = this.state;
const initobj = {
value: null,
label: null,
children: null,
}
let tempindex = 0;
if (i === 0) {
selectaddress[0] = item;
selectaddress[1] = initobj;
selectaddress[2] = initobj;
tempindex = 1
} else if (i === 1) {
selectaddress[1] = item;
selectaddress[2] = initobj;
tempindex = 2
} else {
selectaddress[2].value = item.value;
selectaddress[2].label = item.label;
tempindex = 2
let address = [
{
label: selectaddress[0].label,
value: selectaddress[0].value
},
{
label: selectaddress[1].label,
value: selectaddress[1].value
},
{
label: selectaddress[2].label,
value: selectaddress[2].value
}
]
this.props.commitfun && this.props.commitfun(address);
this.props.dissmissfun && this.props.dissmissfun();
return null;
}
this.setstate({ selectaddress });
interactionmanager.runafterinteractions(() => {
this.tabview.gotopage(tempindex)
})
}
render() {
const { selectaddress } = this.state;
return (
<view style={styles.container}>
<view style={{ width: width, height: 40, flexdirection: 'row', justifycontent: 'center', alignitems: 'center', }}>
<text>所在地区</text>
</view>
<scrollabletabview
ref={(tabview) => {
this.tabview = tabview;
}}
rendertabbar={() => <selectcitytabbar />}
>
{selectaddress.map((obj, i) => {
let array = (i === 0) ? area_json : selectaddress[i - 1].children;
if (array) {
return (
<scrollview
key={i}
tablabel={obj.label || '请选择'}
style={styles.scrollstylelist}
>
{array && array.map((obj2, j) => {
return this.renderlistitem(obj2, i)
})}
</scrollview>
)
}
})}
</scrollabletabview>
</view>
);
}
}
const styles = stylesheet.create({
container: {
height: height * 0.6,
backgroundcolor: '#f5fcff',
},
scrollstylelist: {
width: width,
marginbottom: constant.sizemargindefault,
margintop: constant.sizemargindefault,
},
itemstyle: {
margintop: 5,
width: width,
height: 35,
marginleft: constant.sizemargindefault,
justifycontent: 'center'
},
itemtext: {
fontsize: 15,
color: '#333333'
},
使用方法：
import react, {component} from 'react';
import {
stylesheet,
view,
touchableopacity,
alert,
scrollview,
art,
touchablehighlight,
listview,
dimensions,
text
} from 'react-native';
import {reactnavcomponent, widget} from 'rn-yunxi';
import addressselect from '../../app-widget/address-select/index'
export default class extends react.component {
render() {
return (
<touchableopacity style={{flex:1, justifycontent:'center', alignitems:'center'}} onpress={() => this.openaddressselect()}>
<text >地址选择</text>
</touchableopacity>
);
}
openaddressselect() {
widget.popup.show( // 这边使用自己封装的modal嵌套地址选择器
<addressselect
commitfun={(area) => this.onselectarea(area)}
dissmissfun={() => widget.popup.hide()}
/>,
{
animationtype: 'slide-up', backgroundcolor: '#00000000', onmaskclose: () => {
widget.popup.hide()
}
})
}
onselectarea = (area) => {
log(area)
}
};
数据类型格式
[
{
"value": "110000000000",
"children": [
{
"value": "110100000000",
"children": [
{
"value": "110101000000",
"label": "东城区"
},
{
"value": "110102000000",
"label": "西城区"
},
{
"value": "110105000000",
"label": "朝阳区"
},
{
"value": "110106000000",
"label": "丰台区"
},
{
"value": "110107000000",
"label": "石景山区"
},
{
"value": "110108000000",
"label": "海淀区"
},
{
"value": "110109000000",
"label": "门头沟区"
},
{
"value": "110111000000",
"label": "房山区"
},
{
"value": "110112000000",
"label": "通州区"
},
{
"value": "110113000000",
"label": "顺义区"
},
{
"value": "110114000000",
"label": "昌平区"
},
{
"value": "110115000000",
"label": "大兴区"
},
{
"value": "110116000000",
"label": "怀柔区"
},
{
"value": "110117000000",
"label": "平谷区"
},
{
"value": "110118000000",
"label": "密云区"
},
{
"value": "110119000000",
"label": "延庆区"
}
],
"label": "北京市"
}
],
"label": "北京市"
}
]
相关推荐：
react native跨域资源加载出错如何解决
react native 采用fetch方式发送post请求
实例详解react native时间转换格式工具类
以上就是react native地址挑选器功能实现方法的详细内容。