React Native实现地址挑选器功能

前端之家收集整理的这篇文章主要介绍了React Native实现地址挑选器功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

Feedback,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)}

{name} }

return <TouchableOpacity
key={name + page}
accessible={true}
accessibilityLabel={name}
accessibilityTraits='button'
onPress={() => onPressHandler(page)}

{name} ; }

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,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 组件

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,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)
    }}
    {item.label} ) }

/**

  • 点击列表事件
  • @param item 选中数据
  • @param i 选中行数
    */
    pressItem(item,i) {
    let { selectAddress } = this.state;
    const initObj = {
    value: 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 (

所在地区 { 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 {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()}>

地址选择 );

}

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)
}
};

数据类型格式

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/35614.html

猜你在找的JavaScript相关文章