[react-native] 05 组件 button + alert

导入 button + alert

import {Text, View, StyleSheet, Alert, Button} from 'react-native'

import React, {Component} from 'react'  
import {Text, View, ScrollView, StyleSheet, Dimensions, Alert, Button} from 'react-native'  
  
export default class FlexDirection extends Component{  
    render(){  
        return (  
            <View style={[styles.container]}>  

                <Button title='alert'/>  

            </View>  
        )  
    }  
}  
  
const styles = StyleSheet.create({  
    container:{  
        justifyContent:'space-around',  
        alignItems:'center'  
    },  
})

[react-native] 05 组件 button + alert

添加alert属性

<View style={[styles.container]}>  
  
<Button  
    title='alert'  
    onPress={() =>{alert('我是一个按钮')}}  
/>  
  
</View>

[react-native] 05 组件 button + alert

在这里 alert 是RN里面的一个函数,并不是组件。

<Button  
title='Alert.alert'  
onPress={() =>{Alert.alert('我是一个按钮')}}  
color={'red'}  
/>

我们试一下 Alert.alert 的方法。 通过下面的效果图,我们很明显的能看到区别对吧。一个带标头,一个不带标头。

[react-native] 05 组件 button + alert

携带函数,内部再创建两个按钮

我们首先需要先定义一个箭头函数

createTwoAlertButton = () => {  
    Alert.alert(  
        "警告标题⚠️",  
        "警告内容⚠️",  
        [  
            {  
                text:"取消",  
                onPress:() => console.log('Cancel!'),  
                style:'cancel'  
            },  
            {  
                text:"确认",  
                onPress:() => console.log('Confirm!'),  
                style:'default'  
            }  

        ]  
    )  
}

然后再重新写一个 button 组件

<Button  
title='创建两个按钮'  
onPress={this.createTwoAlertButton}  
color={'green'}  
/>

这里需要注意这个语法:onPress={this.createTwoAlertButton}

然后我们从效果图中可以看到

[react-native] 05 组件 button + alert

[react-native] 05 组件 button + alert

随着按钮的点击,我们可以看到我们所绑定的逻辑

[react-native] 05 组件 button + alert

是可以成功运行输出的。

全部代码

import React, {Component} from 'react'  
import {Text, View, ScrollView, StyleSheet, Dimensions, Alert, Button} from 'react-native'  
  
export default class FlexDirection extends Component{  
  
createTwoAlertButton = () => {  
Alert.alert(  
"警告标题⚠️",  
"警告内容⚠️",  
[  
{  
text:"取消",  
onPress:() => console.log('Cancel!'),  
style:'cancel'  
},  
{  
text:"确认",  
onPress:() => console.log('Confirm!'),  
style:'default'  
}  
  
]  
)  
}  
render(){  
return (  
<View style={[styles.container]}>  
  
<Button  
title='alert'  
onPress={() =>{alert('我是一个按钮')}}  
/>  
  
  
<Button  
title='Alert.alert'  
onPress={() =>{Alert.alert('我是一个按钮')}}  
color={'red'}  
/>  
  
  
<Button  
title='创建两个按钮'  
onPress={this.createTwoAlertButton}  
color={'green'}  
/>  
</View>  
)  
}  
}  
  
const styles = StyleSheet.create({  
container:{  
flex:1,  
justifyContent:'space-around',  
alignItems:'center'  
},  
})

原文链接:https://juejin.cn/post/7336756519240777728 作者:狼_先生

(0)
上一篇 2024年2月19日 上午10:37
下一篇 2024年2月19日 上午10:47

相关推荐

发表回复

登录后才能评论