React Native实现地址挑选器功能


Posted in Javascript onOctober 24, 2017

本文实例为大家分享了React Native地址挑选器的实现代码,供大家参考,具体内容如下

产品经理:“你明白吧,这里向右划可以出菜单,然后需要一个闪烁的动画,还有,我想这个tab可以拉下来,你懂吧?

设计师:“别废话,把你要抄的产品给我看下。”


接下来,我们仿一下别人家的地址挑选器

React Native实现地址挑选器功能

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.sizeDividerLarge, 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.sizeDividerNormal, borderColor: Constant.colorDivider }}>
    {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": "北京市"
 }
]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
MockJs结合json-server模拟后台数据
Aug 26 Javascript
js实现鼠标拖曳效果
Dec 30 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 #Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 #Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 #Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 #Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 #Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 #Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 #Javascript
You might like
php实现telnet功能示例
2014/04/08 PHP
PHP实现事件机制的方法
2015/07/10 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
python决策树之CART分类回归树详解
2017/12/20 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
送货司机岗位职责
2013/12/11 职场文书
环保志愿者活动方案
2014/08/14 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
先进工作者申报材料
2014/12/23 职场文书
离婚律师函范本
2015/05/27 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers