React Native implements the address selector function, reactnative

React Native implements the address selector function, reactnative

This article shares the implementation code of the React Native address selector for your reference. The specific content is as follows:

Product Manager: "You understand, you can drag the menu to the right and then you need a flashing animation. Also, I think this tab can be pulled down, you know?

Designer: "Don't talk nonsense. Show me the product you want to copy ."

...

Next, let's copy another address selector.

Import React, {Component, PropTypes} from 'react '; import {ViewPropTypes, StyleSheet, View, TouchableOpacity, TouchableNativeFeedback, Platform, Animated, Text} from 'react-native '; export default class SelectCityTabBar extends Component {// attribute name static propTypes = {goToPage: PropTypes. func, activeTab: PropTypes. number, tabs: PropTypes. array, backgroundColor: PropTypes. string, activeTextColor: Pr OpTypes. string, inactiveTextColor: PropTypes. string, textStyle: Text. propTypes. style, tabStyle: ViewPropTypes. style, renderTab: PropTypes. func, underlineStyle: ViewPropTypes. style,}; // default property static defaultProps = {activeTextColor: '# FA3D4F', inactiveTextColor: 'black', backgroundColor: null,} renderTab (name, page, isTabActive, onPressHandler) {const {activeTextColor, inactiveTextColor, textSty Le,} = 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-und ', 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 = {selectAdd Ress} 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 re Sult = fun (array? Array: AREA_JSON, lastAddress [index]. value); if (result. children) {array = result. children;} return result;});} catch (e) {console. log ('----- e-', e );} return selectAddress}/*** list line * @ 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>)}/** click list event * @ param item selected data * @ param I selected number of rows */pressItem (item, I) {let {selectAddress} = this. state; const initObj = {value: null, la Bel: 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> region </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 | 'select'} 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 '},

Usage:

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> address selection </Text> </TouchableOpacity>);} openAddressSelect () {Widget. popup. show (// use your encapsulated modal nested address selector <AddressSelect commitFun = {(area) => this. onSelectArea (area)} dissmissFun = {() => Widget. popup. hide ()}/>, {animationType: 'slide-up', backgroundColor: '#00000000', onMaskClose: () =>{ Widget. popup. hide () }}onselectarea = (area) =>{ Log (area )}};

Data Type format

[{"Value": "110000000000", "children": [{"value": "110100000000", "children": {"value": "110101000000 ", "label": "Dongcheng District" },{ "value": "110102000000", "label": "Xicheng district" },{ "value": "110105000000", "label ": "Chaoyang District" },{ "value": "110106000000", "label": "Fengtai District" },{ "value": "110107000000", "label ": "Shijingshan district" },{ "value": "110108000000", "label": "Haidian District" },{ "value": "110109000000", "label ": "Mentougou District" },{ "value": "110111000000", "label": "Fangshan District" },{ "value": "110112000000", "label ": "Tongzhou District" },{ "value": "110113000000", "label": "Shunyi District" },{ "value": "110114000000", "label ": "Changping District" },{ "value": "110115000000", "label": "Daxing District" },{ "value": "110116000000", "label ": "Huairou district" },{ "value": "110117000000", "label": "Pinggu district" },{ "value": "110118000000", "label ": "Miyun district"}, {"value": "110119000000", "label": "Yanqing district"}], "label": "Beijing"}], "label ": "Beijing"}]

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.