一弯拱桥对映着一弯晓月,桥下流水波光粼粼,昙花一般的月,在我眼中异香腾风,秀色媚景。夜的静谧是风景,昼的明媚是风景。江花胜火红,寒山伤心碧,空伫玉阶白,西风残照黄。处处皆风景,处处皆绝妙风景。
本文实例为大家分享了React Native地址挑选器的实现代码,供大家参考,具体内容如下
产品经理:“你明白吧,这里向右划可以出菜单,然后需要一个闪烁的动画,还有,我想这个tab可以拉下来,你懂吧?
设计师:“别废话,把你要抄的产品给我看下。”
…
接下来,我们仿一下别人家的地址挑选器
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": "北京市" } ]
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。