React Native implements address selector function
This time I will bring you React Native to implement the address selector function. What are the precautions for React Native to implement the address selector function. The following is a practical case, let's take a look.
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 component
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' },
How to use:
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) } };
Data typeFormat
[ { "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": "北京市" } ]
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
React Native implements the verification code countdown function
Select all and reverse the selection when checking out in AngularJS shopping cartz
The above is the detailed content of React Native implements address selector function. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

React front-end and back-end separation guide: How to achieve front-end and back-end decoupling and independent deployment, specific code examples are required In today's web development environment, front-end and back-end separation has become a trend. By separating front-end and back-end code, development work can be made more flexible, efficient, and facilitate team collaboration. This article will introduce how to use React to achieve front-end and back-end separation, thereby achieving the goals of decoupling and independent deployment. First, we need to understand what front-end and back-end separation is. In the traditional web development model, the front-end and back-end are coupled

How to build a reliable messaging application with React and RabbitMQ Introduction: Modern applications need to support reliable messaging to achieve features such as real-time updates and data synchronization. React is a popular JavaScript library for building user interfaces, while RabbitMQ is a reliable messaging middleware. This article will introduce how to combine React and RabbitMQ to build a reliable messaging application, and provide specific code examples. RabbitMQ overview:

ReactRouter User Guide: How to Implement Front-End Routing Control With the popularity of single-page applications, front-end routing has become an important part that cannot be ignored. As the most popular routing library in the React ecosystem, ReactRouter provides rich functions and easy-to-use APIs, making the implementation of front-end routing very simple and flexible. This article will introduce how to use ReactRouter and provide some specific code examples. To install ReactRouter first, we need

Integration of Java framework and React framework: Steps: Set up the back-end Java framework. Create project structure. Configure build tools. Create React applications. Write REST API endpoints. Configure the communication mechanism. Practical case (SpringBoot+React): Java code: Define RESTfulAPI controller. React code: Get and display the data returned by the API.

PHP, Vue and React: How to choose the most suitable front-end framework? With the continuous development of Internet technology, front-end frameworks play a vital role in Web development. PHP, Vue and React are three representative front-end frameworks, each with its own unique characteristics and advantages. When choosing which front-end framework to use, developers need to make an informed decision based on project needs, team skills, and personal preferences. This article will compare the characteristics and uses of the three front-end frameworks PHP, Vue and React.

Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3. The specific code example is as follows: HTML code: <divid="container"><divclass="item"> ;First child element</div><divclass="item"&

React Mobile Adaptation Guide: How to optimize the display effect of front-end applications on different screens. In recent years, with the rapid development of the mobile Internet, more and more users are accustomed to using mobile phones to browse websites and use various applications. However, the sizes and resolutions of different mobile phone screens vary widely, which brings certain challenges to front-end development. In order for the website and application to have good display effects on different screens, we need to adapt to the mobile terminal and optimize the front-end code accordingly. Using Responsive Layout Responsive layout is a

How to use React to develop a responsive backend management system. With the rapid development of the Internet, more and more companies and organizations need an efficient, flexible, and easy-to-manage backend management system to handle daily operations. As one of the most popular JavaScript libraries currently, React provides a concise, efficient and maintainable way to build user interfaces. This article will introduce how to use React to develop a responsive backend management system and give specific code examples. Create a React project first
