移动跨平台框架ReactNative弹出框Alert【12】_前端江太公_reactnative 提示框

网络投稿 02-07 4454

前端江太公

React Native，是一个混合移动应用开发框架，是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件，而是基于 React，React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用。

React Native系列导航 01-React Native 基础教程 02-安装ReactNative 03-ReactNative目录结构 04-ReactNative视图View 05-ReactNative组件样式style 06-ReactNative文本组件Text 07-ReactNative组件状态state 08-ReactNative组件属性props 09-ReactNative输入组件TextInput 10-ReactNative图片组件Image 11-ReactNative活动指示器组件 12-ReactNative弹出框Alert 13-ReactNative存储数据组件AsyncStorage 14-ReactNative动画组件Animated 15-ReactNative开关组件Switch 16-状态栏组件StatusBar 17-ReactNative滚动视图ScrollView 18-ReactNative选择器Picker 19-ReactNative网络请求

React Native 弹出框 Alert

弹出框 `` 是浮于当前界面之上的，用于阻止用户的下一步操作，直到用户点击了弹出框上的任意按钮为止。

弹出框 `` 一般用于弹出提示、弹出警告、弹出确认等需要用户注意和确认的动作。

弹出提示

弹出提示框一般只有一个确认按钮，用户点击确认就是我知道了的意思。

弹出警告

弹出警告框一般有两个按钮确认和取消，取消按钮在右边，方便用户点击。

弹出确认

弹出确认框一般有两个按钮确认和取消，确认按钮在右边，方便用户点击。

引入组件 import { Alert } from 'react-native' 使用语法 Alert.alert(title, message?, buttons?, options?, type?) 使用范例 // 同时兼容 iOS 和 Android Alert.alert( '弹出框标题', '弹出框描述', [ {text: '自定义按钮', onPress: () => console.log('点击了自定义按钮')}, { text: '取消', onPress: () => console.log('点击了取消按钮'), style: 'cancel', }, {text: '确认', onPress: () => console.log('点击了确认按钮')}, ], {cancelable: false}, ); 范例 1 ：弹出提示

下面的代码，当我们点击发送按钮时会弹出一个提示操作成功。

Step 1: App.js import React from 'react' import { Alert, Text, TouchableOpacity, StyleSheet } from 'react-native' const App = () => { const showAlert = () =>{ Alert.alert('发送数据成功') } return ( <TouchableOpacity onPress = {showAlert} style = {styles.button}> <Text>发送</Text> </TouchableOpacity> ) } export default App const styles = StyleSheet.create ({ button: { backgroundColor: '#4ba37b', width: 100, borderRadius: 50, alignItems: 'center', marginTop: 100 } })

演示效果如下

范例 2: 弹出警告

下面的代码，当我们点击删除按钮时会弹出一个警告是否删除。

如果用户点击了取消则什么事情都不做，如果点击了确认则会删除数据然后弹出提示

Step 1: App.js import React from 'react' import { Alert, Text, TouchableOpacity, StyleSheet } from 'react-native' const App = () => { const showTip = () => { Alert.alert('删除数据成功') } const showAlert = () =>{ Alert.alert( '警告', '确认删除？', [ {text: '确认', onPress: () => showTip()}, {text: '取消', style: 'cancel'}, ], {cancelable: false} ) } return ( <TouchableOpacity onPress = {showAlert} style = {styles.button}> <Text>删除</Text> </TouchableOpacity> ) } export default App const styles = StyleSheet.create ({ button: { backgroundColor: '#4ba37b', width: 100, borderRadius: 50, alignItems: 'center', marginTop: 100 } })

演示效果如下

范例 3: 弹出确认

下面的代码，当我们点击修改按钮时会弹出一个确认框是否确认。

如果用户点击了取消则什么事情都不做，如果点击了确认则会修改数据然后弹出提示

Step 1: App.js import React from 'react' import { Alert, Text, TouchableOpacity, StyleSheet } from 'react-native' const App = () => { const showTip = () => { Alert.alert('修改数据成功') } const showAlert = () =>{ Alert.alert( '确认', '是否确认修改？', [ {text: '取消', style: 'cancel'}, {text: '确认', onPress: () => showTip()}, ], {cancelable: false} ) } return ( <TouchableOpacity onPress = {showAlert} style = {styles.button}> <Text>修改</Text> </TouchableOpacity> ) } export default App const styles = StyleSheet.create ({ button: { backgroundColor: '#4ba37b', width: 100, borderRadius: 50, alignItems: 'center', marginTop: 100 } })