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

弹出框
	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
    }
})
发布了619 篇原创文章 · 获赞 3 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/105096496
RN