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;

/**

列表行
@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 (
@H_403_37@
<View style={{ width: width,height: 40,alignItems: 'center',}}>

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

数据类型格式

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

React Native实现地址挑选器功能

猜你在找的JavaScript相关文章