弹出框
Alert
用法:
Alert.alert('标题内容','中心内容',[
{'按钮1名称',onPress:按下事件回调},
{'按钮2名称',style:'cancel'},//设置该属性点击后会取消弹出框
],
{cancelable:false}) //阻止点击弹出框外区域取消弹出框
其中:
按钮最多有三个
悬浮信息组件(可配合弹出框的点击事件使用)
ToastAndroid
用法:
(1)ToastAndroid.show('信息内容',悬浮时间)
悬浮时间:ToastAndroid.SHORT/ToastAndroid.LONG
默认悬浮在底部
(2)ToastAndroid.showWithGravity('信息内容',悬浮时间,悬浮位置)
悬浮位置:ToastAndroid.CENTER/ToastAndroid.BOTTOM/ToastAndroid.TOP
(3)ToastAndroid.showWithGravityAndOffset('信息内容',悬浮时间,悬浮位置,x方向偏移坐标无单位的数值,y方向偏移坐标无单位的数值)
代码示例:
import React,{Component} from 'react'
import {View,Text,StyleSheet,Alert, TouchableOpacity,ToastAndroid} from 'react-native'
const App=()=>{
const s1=()=>
{
Alert.alert('发送','hh')
}
s2=()=>{
Alert.alert('删除')
}
s3=()=>{
Alert.alert(
//标题
'警告',
//内容
'确认删除',
//按钮,最多有三个,不写默认为确认按钮
[
{text:'确认',onPress:()=>s2()},
{text:'取消',style:'cancel'},
{text:'哈哈',onPress:()=>ToastAndroid.showWithGravityAndOffset('确定',ToastAndroid.SHORT,ToastAndroid.CENTER,100,80)}
],
//阻止点击提醒框外,取消提醒框
{cancelable:false}
)
}
return(
<>
<View>
<TouchableOpacity onPress={s1} style={style.button}>
<Text>发送</Text>
</TouchableOpacity>
<TouchableOpacity onPress={s3} style={style.button}>
<Text>删除</Text>
</TouchableOpacity>
<TouchableOpacity onPress={s3} style={style.button}>
<Text>测试1</Text>
</TouchableOpacity>
</View>
</>
)
}
export default App;
const style=StyleSheet.create({
button:{
backgroundColor:'#4ba37b',
width:100,
height:50,
borderRadius:50,
justifyContent:'center',
alignItems:'center',
marginTop:100
}
})