个人觉得iOS中的组件看起来都很顺眼,简洁低调大气上档次,所以在适配Android的时候封装了一个iOS样式的Alert替换掉了Android的Alert. 简单介绍一下
新建一个AlertAndroid.JS文件,将代码(在本文尾部)赋值到AlertAndroid.JS文件内. 用的时候需要import导入该组件, 然后在render背景View中实例化组件,设置ref=”alertAndroid”
<AlertAndroid ref="alertAndroid" />
1). 如果只是一个简单的提示,可以直接调用alert()方法.
用法
this.refs.alertAndroid.alert('提示的内容')
效果图
模仿ios的alert_1.png
2). 有一个功能选项.比如 确定、取消, 可以自己设置点击确定执行什么操作.默认点击取消关闭界面
用法
this.refs.alertAndroid.alertWithOptions({
options:['确定','取消'],
title:'温馨提示',
detailText:'确认要进行此操作?'
},
// index是当前点击选项的索引
(index)=>{
if(index == 0) {
this.refs.alertAndroid.alert('点击了确定');
}
}
);
效果图
模仿ios的alert_2.png
3). 有两个或两个以上的功能选项时
用法
this.refs.alertAndroid.alertWithOptions({
options:['春哥','凤姐','取消'],
title:'温馨提示',
detailText:'你最喜欢谁'
},
// index是当前点击选项的索引
(index)=>{
if(index == 0) {
this.refs.alertAndroid.alert('你最喜欢春哥');
} else if(index == 1) {
this.refs.alertAndroid.alert('你最喜欢凤姐');
}
}
);
效果图
模仿ios的alert_3.png
最后附上完整代码.
import React, { Component , } from 'react';
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
import {
StyleSheet,
TouchableOpacity,
Dimensions,
View,
Text,
ListView,
Animated
} from 'react-native';
var deviceHeight = Dimensions.get('window').height;
var deviceWidth = Dimensions.get('window').width;
class AlertAndroid extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
options:[],
title:null,
detailText:null,
clickAction:null,
isShow:false,
alertText:null,
opacityValue:new Animated.Value(0),
scaleValue:new Animated.Value(0)
};
}
close() {
this.setState({
isShow:false,
options:[],
title:null,
detailText:null,
clickAction:null,
alertText:null
});
this.state.opacityValue.setValue(0);
this.state.scaleValue.setValue(0);
}
alertWithOptions(data,clickAction) {
this.setState({
isShow:true,
options:data.options,
title:data.title,
detailText:data.detailText,
clickAction:clickAction && clickAction.bind(this)
});
Animated.parallel([
Animated.timing(this.state.opacityValue, {
toValue: 1,
duration: 200
}),
Animated.timing(this.state.scaleValue, {
toValue: 1,
duration: 100
})
]).start();
}
alert(text) {
this.setState({
isShow:true,
alertText:text
});
Animated.parallel([
Animated.timing(this.state.opacityValue, {
toValue: 1,
duration: 200
}),
Animated.timing(this.state.scaleValue, {
toValue: 1,
duration: 100
})
]).start();
}
renderRow(contactOption,sectionID,rowID) {
return(
rowID != this.state.options.length - 1 &&
<View style={{backgroundColor:'rgba(220,220,220,1)'}}>
<View style={{height:0.5,backgroundColor:'rgba(235,235,235,1)'}}/>
<TouchableOpacity style={{backgroundColor:'white'}}
activeOpacity={0.7}
onPress={()=>this.click(rowID)}>
<View style={{height:44,justifyContent:'center',alignItems:'center'}}>
<Text style={{fontSize:16,color:'rgba(0,127,247,1)'}}>{contactOption}</Text>
</View>
</TouchableOpacity>
</View>
)
}
click(rowID) {
this.close();
this.state.clickAction ? this.state.clickAction(rowID) : alert('没有传点击调用的方法')
}
render() {
return(
this.state.isShow &&
<Animated.View style={{height:deviceHeight,width:deviceWidth,justifyContent:'center',alignItems:'center',backgroundColor:'rgba(0,0,0,0.4)',position:'absolute',top:0,opacity: this.state.opacityValue}}>
<Animated.View style={{width:deviceWidth / 6 * 4,transform: [{scale:this.state.scaleValue}]}}>
<View style={{height:this.state.options.length > 2 ? 70 : 75,borderTopLeftRadius:10,borderTopRightRadius:10,justifyContent:'center',alignItems:'center',backgroundColor:'white'}}>
<Text style={{fontSize:16,color:'black'}}>{this.state.alertText ? '提示' : this.state.title}</Text>
<Text style={{fontSize:12,color:'rgba(40,40,40,1)'}}>{this.state.alertText ? this.state.alertText : this.state.detailText}</Text>
</View>
{this.state.options.length > 2 &&
<ListView
dataSource={ds.cloneWithRows(this.state.options)}
renderRow={(contactOption,sectionID,rowID) => this.renderRow(contactOption,sectionID,rowID)}
renderFooter={()=>
<View style={{backgroundColor:'rgba(220,220,220,1)',borderBottomLeftRadius:10,borderBottomRightRadius:10,
borderTopWidth:0.5,borderTopColor:'rgba(235,235,235,1)'}}>
<TouchableOpacity style={{backgroundColor:'white',borderBottomLeftRadius:10,borderBottomRightRadius:10}}
activeOpacity={0.7}
onPress={()=>this.close()}>
<View style={{height:44,justifyContent:'center',alignItems:'center'}}>
<Text style={{fontSize:16,color:'red'}}>{this.state.options[this.state.options.length - 1]}</Text>
</View>
</TouchableOpacity>
</View>}
/>
}
{this.state.options.length == 2 &&
<View style={{height:40,flexDirection:'row',borderTopWidth:0.5,borderTopColor:'rgba(235,235,235,1)'}}>
<TouchableOpacity style={{height:40,width:deviceWidth / 3 - 0.25,backgroundColor:'white',borderBottomLeftRadius:10,justifyContent:'center',alignItems:'center'}}
activeOpacity={0.8}
onPress={()=>this.click('0')}>
<Text style={{color:'rgba(0,115,250,1)'}}>{this.state.options[0]}</Text>
</TouchableOpacity>
<View style={{width:0.5,backgroundColor:'rgba(235,235,235,1)'}}/>
<TouchableOpacity style={{height:40,width:deviceWidth / 3 - 0.25,backgroundColor:'white',borderBottomRightRadius:10,justifyContent:'center',alignItems:'center'}}
activeOpacity={0.8}
onPress={()=>this.close()}>
<Text style={{color:'rgba(0,115,250,1)'}}>{this.state.options[1]}</Text>
</TouchableOpacity>
</View>
}
{this.state.options.length == 1 &&
<View style={{borderTopWidth:0.5,borderTopColor:'rgba(235,235,235,1)'}}>
<TouchableOpacity style={{height:40,justifyContent:'center',alignItems:'center',borderBottomLeftRadius:10,borderBottomRightRadius:10,backgroundColor:'white'}}
activeOpacity={0.8}
onPress={()=>this.close()}>
<Text style={{color:'rgba(0,115,250,1)'}}>{this.state.options[0]}</Text>
</TouchableOpacity>
</View>
}
{this.state.alertText &&
<View style={{borderTopWidth:0.5,borderTopColor:'rgba(235,235,235,1)'}}>
<TouchableOpacity style={{height:40,justifyContent:'center',alignItems:'center',borderBottomLeftRadius:10,borderBottomRightRadius:10,backgroundColor:'white'}}
activeOpacity={0.8}
onPress={()=>this.close()}>
<Text style={{color:'rgba(0,115,250,1)'}}>确定</Text>
</TouchableOpacity>
</View>
}
</Animated.View>
</Animated.View>
);
}
}
export default AlertAndroid;
网友评论