rn 弹出框组件Alert、悬浮信息组件ToastAndroid

蔚落 2021-07-24 14:33 1508阅读 0赞

弹出框
    	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
        }
    })