ReactNative實現(xiàn)地址挑選器功能

本文實例為大家分享了React Native地址挑選器的實現(xiàn)代碼，供大家參考，具體內(nèi)容如下

十余年的南京網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都營銷網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整南京建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“南京網(wǎng)站設(shè)計”,“南京網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

產(chǎn)品經(jīng)理：“你明白吧，這里向右劃可以出菜單，然后需要一個閃爍的動畫，還有，我想這個tab可以拉下來，你懂吧？

設(shè)計師：“別廢話，把你要抄的產(chǎn)品給我看下。”

…

接下來，我們仿一下別人家的地址挑選器

React Native實現(xiàn)地址挑選器功能

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,
 };
 //默認(rèn)屬性
 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  onPressHandler(page)}
   >
    
     
      {name}
     
    
   
  }

  return  onPressHandler(page)}
  >
   
    
     {name}
    
   
  ;
 }

 render() {
  return (
   
    {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);
    })}
   
  );
 }
}



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 (
    {
     this.pressItem(item, i)
    }}
   >
    {item.label}
   
  )
 }

 /**
  * 點擊列表事件
  * @param item 選中數(shù)據(jù)
  * @param i 選中行數(shù)
  */
 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 (
   
    
     所在地區(qū)
    
     {
      this.tabView = tabView;
     }}
     renderTabBar={() => }
    >
     {selectAddress.map((obj, i) => {
      let array = (i === 0) ? AREA_JSON : selectAddress[i - 1].children;
      if (array) {
       return (
        
         {array && array.map((obj2, j) => {
          return this.renderListItem(obj2, i)
         })}
        
       )
      }
     })}
    
   
  );
 }
}

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 (
    this.openAddressSelect()}>
    地址選擇
   
  );

 }

 openAddressSelect() {

  Widget.Popup.show( // 這邊使用自己封裝的modal嵌套地址選擇器
    this.onSelectArea(area)}
    dissmissFun={() => Widget.Popup.hide()}
   />,
   {
    animationType: 'slide-up', backgroundColor: '#00000000', onMaskClose: () => {
    Widget.Popup.hide()
   }
   })
 }

 onSelectArea = (area) => {
  Log(area)
 }
};

數(shù)據(jù)類型格式

[
 {
  "value": "110000000000",
  "children": [
   {
    "value": "110100000000",
    "children": [
     {
      "value": "110101000000",
      "label": "東城區(qū)"
     },
     {
      "value": "110102000000",
      "label": "西城區(qū)"
     },
     {
      "value": "110105000000",
      "label": "朝陽區(qū)"
     },
     {
      "value": "110106000000",
      "label": "豐臺區(qū)"
     },
     {
      "value": "110107000000",
      "label": "石景山區(qū)"
     },
     {
      "value": "110108000000",
      "label": "海淀區(qū)"
     },
     {
      "value": "110109000000",
      "label": "門頭溝區(qū)"
     },
     {
      "value": "110111000000",
      "label": "房山區(qū)"
     },
     {
      "value": "110112000000",
      "label": "通州區(qū)"
     },
     {
      "value": "110113000000",
      "label": "順義區(qū)"
     },
     {
      "value": "110114000000",
      "label": "昌平區(qū)"
     },
     {
      "value": "110115000000",
      "label": "大興區(qū)"
     },
     {
      "value": "110116000000",
      "label": "懷柔區(qū)"
     },
     {
      "value": "110117000000",
      "label": "平谷區(qū)"
     },
     {
      "value": "110118000000",
      "label": "密云區(qū)"
     },
     {
      "value": "110119000000",
      "label": "延慶區(qū)"
     }
    ],
    "label": "北京市"
   }
  ],
  "label": "北京市"
 }
]

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文標(biāo)題：ReactNative實現(xiàn)地址挑選器功能
文章URL：http://weahome.cn/article/ppioed.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

ReactNative實現(xiàn)地址挑選器功能

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管