React Native仿美团下拉菜单
发布时间:2020-12-15 05:11:07 所属栏目:百科 来源:网络整理
导读:在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效果如下: 要实现上面的效果,在原生中比较好做,直接使用PopWindow组件即可。如果使用React Native开发上面的效果,需要注意几个问题: 1、 在下拉的时候有动画过度效果; 2、下拉菜单出
在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效果如下: 要实现上面的效果,在原生中比较好做,直接使用PopWindow组件即可。如果使用React Native开发上面的效果,需要注意几个问题: 要实现弹框效果,我们马上回想到使用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,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。 /** * 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,justifyContent: 'flex-start',alignSelf: 'center',paddingLeft: 10,text: {
fontSize: 16,color: '#ffffff',justifyContent: 'center',iconStyle: {
width: 22,height: 22,action: {
flexDirection: 'row',marginLeft:10,marginRight:10
},scanIcon: {
width: 28,height: 28,scanText: {
fontSize: 14,});
TopMenu.js /**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React,{Component} from 'react';
import {
AppRegistry,Animated,ScrollView,PixelRatio,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.tableItemText;
let onPress = () => {
props.onSelectMenu(props.index,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,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,0.2)'},content: { position: 'absolute',width: width },highlight: { color: COLOR_HIGH },marginHigh: {marginLeft: 10},margin: {marginLeft: 28},titleItem: { height: 43,paddingRight: 10,borderBottomWidth: LINE,borderBottomColor: '#eee',tableItem: { height: 43,justifyContent: 'space-between' },tableItemText: {fontWeight: '300',fontSize: 14},row: { flexDirection: 'row' },item: { flex: 1,menuTextHigh: { marginRight: 3,fontSize: 13,color: COLOR_HIGH },menuText: { marginRight: 3,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,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'},subtitle:'200m'},subtitle:'500m'},subtitle:'800m'},subtitle:'700m'},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,data)=>{
this.setState({index,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,});
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |