本文实例为大家分享了反应本地地址挑选器的实现代码,供大家参考,具体内容如下
产品经理:“你明白吧,这里向右划可以出菜单,然后需要一个闪烁的动画,还有,我想这个选项卡可以拉下来,你懂吧?
设计师:“别废话,把你要抄的产品给我看下。”
…
接下来,我们仿一下别人家的地址挑选器
进口的反应,从“反应”{组件,proptype};
进口{
ViewPropTypes,
样式表,
看来,
TouchableOpacity,
TouchableNativeFeedback,
平台,
动画,
文本
从“react-native”};
出口的默认类SelectCityTabBar扩展组件{//属性声名
静态proptype={
goToPage: PropTypes.func,
activeTab: PropTypes.number,
标签:PropTypes.array,
写成backgroundColor: PropTypes.string,
activeTextColor: PropTypes.string,
inactiveTextColor: PropTypes.string,
textStyle: Text.propTypes.style,
tabStyle: ViewPropTypes.style,
renderTab: PropTypes.func,
underlineStyle: ViewPropTypes.style,
};//默认属性
静态defaultProps={
activeTextColor:“# FA3D4F ',
inactiveTextColor:“黑色”,
写成backgroundColor:空,
}
renderTab(名称、页面isTabActive>
进口的反应,从“反应”{组件};
进口{
样式表,
看来,
滚动视图,
维度,
TouchableOpacity,
InteractionManager,
平台,
UIManager,
文本
从“react-native”};
从“进口ScrollableTabView react-native-scrollable-tab-view ';
从“进口SelectCityTabBar。/SelectCityTabBar '
从“. ./. ./util/进口AREA_JSON area.json”;
const{高度、宽度}=Dimensions.get(“窗口”);
出口的默认类AddressSelect扩展组件{
静态defaultProps={
commitFun:功能(价值){
console.log(价值);
}，
dissmissFun:函数(){
}，
lastAddress:空,
};
构造函数(道具){
超级(道具);
如果平台。操作系统===癮ndroid”) {
UIManager.setLayoutAnimationEnabledExperimental(真正的)
}
const {lastAddress}=道具;
让selectAddress=this.initAddress (lastAddress);
这一点。状态={
selectAddress
}
}
initAddress (lastAddress) {
让selectAddress=[
{
值:空,
标签:空,
孩子们:AREA_JSON,
},{
值:空,
标签:空,
孩子们:零,
},{
值:空,
标签:空,
孩子们:零,
});
让数组=零;
有趣(数组,函数值){
(让项的数组){
如果项目。值+===价值+){
返回项目;
}
}
}
尝试{
selectAddress=selectAddress。地图((项目、索引)=比;{
让结果=乐趣(数组& # 63;数组:AREA_JSON lastAddress(指数)value);
如果(result.children) {
数组=result.children;
}
返回结果;
});
}捕捉(e) {
控制台。日志(' - - - - - - e - e);
}
返回selectAddress
}/* *
*列表行
* @param项
* @param我
* @returns {XML}
*/renderListItem(项目,i) {
让itemStyle=styles.itemStyle;
让textStyle=styles.itemText;
让{selectAddress}=this.state;
如果项目。标签===selectAddress[我].label) {
itemStyle=[itemStyle];
textStyle=[textStyle,{颜色:“红色”}]
}
回报(
& lt; TouchableOpacity
风格={itemStyle}
关键={i + item.label}>
进口的反应,从“反应”{组件};
进口{
样式表,
看来,
TouchableOpacity,
警惕,
滚动视图,
艺术,
TouchableHighlight,
列表视图,
维度,
文本
从“react-native”};
从“rn-yunxi”进口{ReactNavComponent,部件};
从“. ./. ./应用/进口AddressSelect address-select/指数”
出口的默认类扩展的反应。组件{
呈现(){
回报(
& lt; TouchableOpacity风格={{flex: 1、justifyContent:“中心”,alignItems:‘中心’}}>
(
{
“价值”:“110000000000”,
“孩子”:(
{
“价值”:“110100000000”,
“孩子”:(
{
“价值”:“110101000000”,
“标签”:“东城区”
}，
{
“价值”:“110102000000”,
“标签”:“西城区”
}，
{
“价值”:“110105000000”,
“标签”:“朝阳区”
}，
{
“价值”:“110106000000”,
“标签”:“丰台区”
}，
{
“价值”:“110107000000”,
“标签”:“石景山区”
}，
{
“价值”:“110108000000”,
“标签”:“海淀区”
}，
{
“价值”:“110109000000”,
“标签”:“门头沟区”
}，
{
“价值”:“110111000000”,
“标签”:“房山区”
}，
{
“价值”:“110112000000”,
“标签”:“通州区”
}，
{
“价值”:“110113000000”,
“标签”:“顺义区”
}，
{
“价值”:“110114000000”,
“标签”:“昌平区”
}，
{
“价值”:“110115000000”,
“标签”:“大兴区”
}，
{
“价值”:“110116000000”,
“标签”:“怀柔区”
}，
{
“价值”:“110117000000”,
“标签”:“平谷区”
}，
{
“价值”:“110118000000”,
“标签”:“密云区”
}，
{
“价值”:“110119000000”,
“标签”:“延庆区”
}
),
“标签”:“北京市”
}
),
“标签”:“北京市”
}
]
