android依赖alert样式,react-native Android中实现iOS的Alert样式

个人觉得iOS中的组件看起来都很顺眼,简洁低调大气上档次,所以在适配Android的时候封装了一个iOS样式的Alert替换掉了Android的Alert. 简单介绍一下

新建一个AlertAndroid.JS文件,将代码(在本文尾部)赋值到AlertAndroid.JS文件内. 用的时候需要import导入该组件, 然后在render背景View中实例化组件,设置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 &&

activeOpacity={0.7}

onPress={()=>this.click(rowID)}>

{contactOption}

)

}

click(rowID) {

this.close();

this.state.clickAction ? this.state.clickAction(rowID) : alert('没有传点击调用的方法')

}

render() {

return(

this.state.isShow &&

2 ? 70 : 75,borderTopLeftRadius:10,borderTopRightRadius:10,justifyContent:'center',alignItems:'center',backgroundColor:'white'}}>

{this.state.alertText ? '提示' : this.state.title}

{this.state.alertText ? this.state.alertText : this.state.detailText}

{this.state.options.length > 2 &&

dataSource={ds.cloneWithRows(this.state.options)}

renderRow={(contactOption,sectionID,rowID) => this.renderRow(contactOption,sectionID,rowID)}

renderFooter={()=>

borderTopWidth:0.5,borderTopColor:'rgba(235,235,235,1)'}}>

activeOpacity={0.7}

onPress={()=>this.close()}>

{this.state.options[this.state.options.length - 1]}

}

/>

}

{this.state.options.length == 2 &&

activeOpacity={0.8}

onPress={()=>this.click('0')}>

{this.state.options[0]}

activeOpacity={0.8}

onPress={()=>this.close()}>

{this.state.options[1]}

}

{this.state.options.length == 1 &&

activeOpacity={0.8}

onPress={()=>this.close()}>

{this.state.options[0]}

}

{this.state.alertText &&

activeOpacity={0.8}

onPress={()=>this.close()}>

确定

}

);

}

}

export default AlertAndroid;