React Native仿美团下拉菜单
时间:2022-04-24
本文章向大家介绍React Native仿美团下拉菜单,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效果如下:
要实现上面的效果,在原生中比较好做,直接使用PopWindow组件即可。如果使用React Native开发上面的效果,需要注意几个问题: 1、 在下拉的时候有动画过度效果; 2、下拉菜单出现后点击菜单项,菜单项可选择,并触发对应的事件; 3、下拉菜单中的项目可以配置;
要实现弹框效果,我们马上回想到使用Model组件,而要绘制打钩图标和下拉三角,我们首先想到使用ART实现,当然选择使用图标也是可以的。例如使用ART绘制对勾的代码如下:
const Check = ()=>{
return (
<Surface
width={18}
height={12}
>
<Group scale={0.03}>
<Shape
fill={COLOR_HIGH}
d={`M494,52c-13-13-33-13-46,0L176,324L62,211c-13-13-33-13-46,0s-13,33,0,46l137,136c6,6,15,10,23,10s17-4,23-10L494,99
C507,86,507,65,494,52z`}
/>
</Group>
</Surface>
);
}
下拉动画的实现上,需要使用Animated。例如,背景颜色变化需要使用Animated.timing。
this.state.fadeInOpacity,
{
toValue: value,
duration : 250,
}
运行效果:
本示例设计三个文件:导航栏FoodActionBar.js,下拉弹框TopMenu.js和文件主类FoodView.js。 FoodActionBar.js
/**
* https://github.com/facebook/react-native
* @flow 首页的标题栏
*/
import React, {Component} from 'react';
import {Platform, View, Dimensions, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';
import px2dp from '../util/Utils'
const isIOS = Platform.OS == "ios"
const {width, height} = Dimensions.get('window')
const headH = px2dp(isIOS ? 64 : 44)
export default class FoodActionBar extends Component {
constructor(props) {
super(props);
this.state = {
showPop: false,
}
}
renderHeader() {
return (
<View style={styles.headerStyle}>
<TouchableOpacity style={styles.action} >
<Image style={styles.scanIcon}/>
</TouchableOpacity>
<TouchableOpacity style={styles.searchBar}>
<Image source={require('../images/ic_search.png')} style={styles.iconStyle}/>
<Text style={{fontSize: 13, color: "#666", marginLeft: 5}}>输入商家名、品类和商圈</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.action} onPress={() => { this.setState({ showPop: !this.state.showPop }) }}>
<Image style={styles.scanIcon}
source={require('../images/icon_address.png')}/>
</TouchableOpacity>
</View>
)
}
render() {
return (
<View>
{this.renderHeader()}
</View>
);
}
}
const styles = StyleSheet.create({
headerStyle: {
backgroundColor: "#ffffff",
height: headH,
paddingTop: px2dp(isIOS ? 20 : 0),
flexDirection: 'row',
alignItems: 'center',
},
searchBar: {
flex:1,
height: 30,
borderRadius: 19,
backgroundColor:'#e9e9e9',
marginLeft: 10,
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
alignSelf: 'center',
paddingLeft: 10,
},
text: {
fontSize: 16,
color: '#ffffff',
justifyContent: 'center',
},
iconStyle: {
width: 22,
height: 22,
},
action: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginLeft:10,
marginRight:10
},
scanIcon: {
width: 28,
height: 28,
alignItems: 'center',
},
scanText: {
fontSize: 14,
color: '#ffffff',
justifyContent: 'center',
alignItems: 'center',
},
});
TopMenu.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Animated,
ScrollView,
Dimensions,
PixelRatio,
Text,
TouchableWithoutFeedback,
TouchableHighlight,
ART,
View
} from 'react-native';
const {Surface, Shape, Path, Group} = ART;
const {width, height} = Dimensions.get('window');
const T_WIDTH = 7;
const T_HEIGHT = 4;
const COLOR_HIGH = '#00bea9';
const COLOR_NORMAL = '#6c6c6c';
const LINE = 1 / PixelRatio.get();
class Triangle extends React.Component {
render() {
var path;
var fill;
if (this.props.selected) {
fill = COLOR_HIGH;
path = new Path()
.moveTo(T_WIDTH / 2, 0)
.lineTo(0, T_HEIGHT)
.lineTo(T_WIDTH, T_HEIGHT)
.close();
} else {
fill = COLOR_NORMAL;
path = new Path()
.moveTo(0, 0)
.lineTo(T_WIDTH, 0)
.lineTo(T_WIDTH / 2, T_HEIGHT)
.close();
}
return (
<Surface width={T_WIDTH} height={T_HEIGHT}>
<Shape d={path} stroke="#00000000" fill={fill} strokeWidth={0}/>
</Surface>
)
}
}
const TopMenuItem = (props) => {
const onPress = () => {
props.onSelect(props.index);
}
return (
<TouchableWithoutFeedback onPress={onPress}>
<View style={styles.item}>
<Text style={props.selected ? styles.menuTextHigh : styles.menuText}>{props.label}</Text>
<Triangle selected={props.selected}/>
</View>
</TouchableWithoutFeedback>
);
};
const Subtitle = (props) => {
let textStyle = props.selected ?
[styles.tableItemText, styles.highlight, styles.marginHigh] :
[styles.tableItemText, styles.margin];
let rightTextStyle = props.selected ? [styles.tableItemText, styles.highlight] : styles.tableItemText;
let onPress = () => {
props.onSelectMenu(props.index, props.subindex, props.data);
}
return (
<TouchableHighlight onPress={onPress} underlayColor="#f5f5f5">
<View style={styles.tableItem}>
<View style={styles.row}>
{props.selected && <Check />}
<Text style={textStyle}>{props.data.title}</Text>
</View>
<Text style={rightTextStyle}>{props.data.subtitle}</Text>
</View>
</TouchableHighlight>
);
};
const Title = (props) => {
let textStyle = props.selected ?
[styles.tableItemText, styles.highlight, styles.marginHigh] :
[styles.tableItemText, styles.margin];
let rightTextStyle = props.selected ? [styles.tableItemText, styles.highlight] : styles.tableItemText;
let onPress = () => {
props.onSelectMenu(props.index, props.subindex, props.data);
}
return (
<TouchableHighlight onPress={onPress} underlayColor="#f5f5f5">
<View style={styles.titleItem}>
{props.selected && <Check />}
<Text style={textStyle}>{props.data.title}</Text>
</View>
</TouchableHighlight>
);
};
const Check = () => {
return (
<Surface
width={18}
height={12}
>
<Group scale={0.03}>
<Shape
fill={COLOR_HIGH}
d={`M494,52c-13-13-33-13-46,0L176,324L62,211c-13-13-33-13-46,0s-13,33,0,46l137,136c6,6,15,10,23,10s17-4,23-10L494,99
C507,86,507,65,494,52z`}
/>
</Group>
</Surface>
);
}
export default class TopMenu extends Component {
constructor(props) {
super(props);
let array = props.config;
let top = [];
let maxHeight = [];
let subselected = [];
let height = [];
//最大高度
var max = parseInt((height - 80) * 0.8 / 43);
for (let i = 0, c = array.length; i < c; ++i) {
let item = array[i];
top[i] = item.data[item.selectedIndex].title;
maxHeight[i] = Math.min(item.data.length, max) * 43;
subselected[i] = item.selectedIndex;
height[i] = new Animated.Value(0);
}
//分析数据
this.state = {
top: top,
maxHeight: maxHeight,
subselected: subselected,
height: height,
fadeInOpacity: new Animated.Value(0),
selectedIndex: null
};
}
componentDidMount() {
}
createAnimation = (index, height) => {
return Animated.timing(
this.state.height[index],
{
toValue: height,
duration: 250
}
);
}
createFade = (value) => {
return Animated.timing(
this.state.fadeInOpacity,
{
toValue: value,
duration: 250,
}
);
}
onSelect = (index) => {
if (index === this.state.selectedIndex) {
//消失
this.hide(index);
} else {
this.setState({selectedIndex: index, current: index});
this.onShow(index);
}
}
hide = (index, subselected) => {
let opts = {selectedIndex: null, current: index};
if (subselected !== undefined) {
this.state.subselected[index] = subselected;
this.state.top[index] = this.props.config[index].data[subselected].title;
opts = {selectedIndex: null, current: index, subselected: this.state.subselected.concat()};
}
this.setState(opts);
this.onHide(index);
}
onShow = (index) => {
Animated.parallel([this.createAnimation(index, this.state.maxHeight[index]), this.createFade(1)]).start();
}
onHide = (index) => {
//其他的设置为0
for (let i = 0, c = this.state.height.length; i < c; ++i) {
if (index != i) {
this.state.height[i].setValue(0);
}
}
Animated.parallel([this.createAnimation(index, 0), this.createFade(0)]).start();
}
onSelectMenu = (index, subindex, data) => {
this.hide(index, subindex);
this.props.onSelectMenu && this.props.onSelectMenu(index, subindex, data);
}
renderList = (d, index) => {
let subselected = this.state.subselected[index];
let Comp = null;
if (d.type == 'title') {
Comp = Title;
} else {
Comp = Subtitle;
}
let enabled = this.state.selectedIndex == index || this.state.current == index;
return (
<Animated.View key={index} pointerEvents={enabled ? 'auto' : 'none'}
style={[styles.content, {opacity: enabled ? 1 : 0, height: this.state.height[index]}]}>
<ScrollView style={styles.scroll}>
{d.data.map((data, subindex) => {
return <Comp
onSelectMenu={this.onSelectMenu}
index={index}
subindex={subindex}
data={data}
selected={subselected == subindex}
key={subindex}/>
})}
</ScrollView>
</Animated.View>
);
}
render() {
let list = null;
if (this.state.selectedIndex !== null) {
list = this.props.config[this.state.selectedIndex].data;
}
console.log(list);
return (
<View style={{flex: 1}}>
<View style={styles.topMenu}>
{this.state.top.map((t, index) => {
return <TopMenuItem
key={index}
index={index}
onSelect={this.onSelect}
label={t}
selected={this.state.selectedIndex === index}/>
})}
</View>
{this.props.renderContent()}
<View style={styles.bgContainer} pointerEvents={this.state.selectedIndex !== null ? "auto" : "none"}>
<Animated.View style={[styles.bg, {opacity: this.state.fadeInOpacity}]}/>
{this.props.config.map((d, index) => {
return this.renderList(d, index);
})}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
scroll: {flex: 1, backgroundColor: '#fff'},
bgContainer: {position: 'absolute', top: 40, width: width, height: height},
bg: {flex: 1, backgroundColor: 'rgba(50,50,50,0.2)'},
content: {
position: 'absolute',
width: width
},
highlight: {
color: COLOR_HIGH
},
marginHigh: {marginLeft: 10},
margin: {marginLeft: 28},
titleItem: {
height: 43,
alignItems: 'center',
paddingLeft: 10,
paddingRight: 10,
borderBottomWidth: LINE,
borderBottomColor: '#eee',
flexDirection: 'row',
},
tableItem: {
height: 43,
alignItems: 'center',
paddingLeft: 10,
paddingRight: 10,
borderBottomWidth: LINE,
borderBottomColor: '#eee',
flexDirection: 'row',
justifyContent: 'space-between'
},
tableItemText: {fontWeight: '300', fontSize: 14},
row: {
flexDirection: 'row'
},
item: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
menuTextHigh: {
marginRight: 3,
fontSize: 13,
color: COLOR_HIGH
},
menuText: {
marginRight: 3,
fontSize: 13,
color: COLOR_NORMAL
},
topMenu: {
flexDirection: 'row',
height: 40,
borderTopWidth: LINE,
borderTopColor: '#bdbdbd',
borderBottomWidth: 1,
borderBottomColor: '#f2f2f2'
},
});
主类FoodView.js:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
TouchableOpacity,
Dimensions,
Text,
View
} from 'react-native';
const {width, height} = Dimensions.get('window');
import FoodActionBar from "./pop/FoodActionBar";
import Separator from "./util/Separator";
import TopMenu from "./pop/TopMenu";
const CONFIG = [
{
type:'subtitle',
selectedIndex:1,
data:[
{title:'全部', subtitle:'1200m'},
{title:'自助餐', subtitle:'300m'},
{title:'自助餐', subtitle:'200m'},
{title:'自助餐', subtitle:'500m'},
{title:'自助餐', subtitle:'800m'},
{title:'自助餐', subtitle:'700m'},
{title:'自助餐', subtitle:'900m'},
]
},
{
type:'title',
selectedIndex:0,
data:[{
title:'智能排序'
}, {
title:'离我最近'
}, {
title:'好评优先'
}, {
title:'人气最高'
}]
}
];
export default class FoodView extends Component {
constructor(props){
super(props);
this.state = {
data:{}
};
}
renderContent=()=>{
return (
<TouchableOpacity >
<Text style={styles.text}>index:{this.state.index} subindex:{this.state.subindex} title:{this.state.data.title}</Text>
</TouchableOpacity>
);
// alert(this.state.data.title)
};
onSelectMenu=(index, subindex, data)=>{
this.setState({index, subindex, data});
};
render() {
return (
<View style={styles.container}>
<FoodActionBar/>
<Separator/>
<TopMenu style={styles.container} config={CONFIG} onSelectMenu={this.onSelectMenu} renderContent={this.renderContent}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
width:width,
backgroundColor: '#F5FCFF',
},
text: {
fontSize:20,
marginTop:100,
justifyContent: 'center',
alignItems: 'center',
},
});
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 用云开发实现在线五子棋h5(含源码)
- Duo RDP双因素身份验证防护绕过
- Hackbar 2.3.1插件许可证限制绕过
- Linux系统下安装JDK
- MATLAB借助openai gym环境训练强化学习模型
- java作业篇,闰年,BMI
- 主题hondsome折腾,css修改
- typecho显示网站运行时间
- 从 Dagger 到 Hilt,谷歌为何执着于让我们用依赖注入?
- 为什么非对称加密比对称加密慢?
- 如何优化Nginx的处理性能
- 一键生成前后端代码,Mybatis-Plus代码生成器让我舒服了
- 各类好玩免费API推荐,强烈建议收藏
- 回敬Python蹭女神热度助发朋友圈,Java实现头像分成九宫图,再生成拼图头像
- java作业:实现数组翻转