React Native 之 Alert()和prompt()（十三）

在 React Native 中，Alert 是一个全局的 API，用于显示原生系统的对话框。与 Web 浏览器中的 alert() 函数类似，但它提供了更多的功能和更好的用户体验，因为它是基于原生系统的对话框，而不是基于 Web 的弹出框。

alert()

static alert(title, message?, buttons?, options?)

参数：

title ------ 对话框的标题。传递字符串或空字符串将隐藏标题。
message ------ 显示在对话框标题下方的可选消息。
buttons ------ 包含按钮配置的可选阵列。
options ------ Android 的可选警报配置。

import React, { useState } from 'react';  
import { View, Button, Alert } from 'react-native';  const AlertExample = () => {  const showAlert = () => {  Alert.alert(  'Alert Title',  'My Alert Msg',  [  {  text: 'Cancel',  onPress: () => console.log('Cancel Pressed'),  style: 'cancel',  },  {  text: 'OK',  onPress: () => console.log('OK Pressed'),  },  ],  { cancelable: false },  );  };  return (  <View style={{ paddingTop: 50 }}>  <Button title="Show Alert" onPress={showAlert} />  </View>  );  
};  export default AlertExample;

prompt()

在 React Native 中，并没有内建的 prompt() 函数，因为 prompt() 是 Web API 的一部分，用于在浏览器中显示一个对话框，提示用户输入一些文本。然而，React Native 提供了不同的方式来获取用户输入，比如使用组件和模态对话框（如 Modal 组件或者第三方库如 react-native-modal）来模拟 prompt() 的行为。

import React, { useState } from 'react';  
import { View, Text, TextInput, Modal, TouchableOpacity, StyleSheet } from 'react-native';  const Prompt = ({ visible, onClose, onSubmit }) => {  const [inputValue, setInputValue] = useState('');  const handleSubmit = () => {  onSubmit(inputValue);  onClose();  };  const handleChangeText = (text) => {  setInputValue(text);  };  return (  <Modal  animationType="slide"  transparent={false}  visible={visible}  onRequestClose={onClose}  >  <View style={styles.modal}>  <View style={styles.content}>  <Text style={styles.title}>请输入文本：</Text>  <TextInput  style={styles.input}  onChangeText={handleChangeText}  value={inputValue}  autoFocus={true}  />  <View style={styles.buttonContainer}>  <TouchableOpacity style={styles.button} onPress={handleSubmit}>  <Text style={styles.buttonText}>确定</Text>  </TouchableOpacity>  <TouchableOpacity style={styles.button} onPress={onClose}>  <Text style={styles.buttonText}>取消</Text>  </TouchableOpacity>  </View>  </View>  </View>  </Modal>  );  
};  const styles = StyleSheet.create({  // ... 定义你的样式  
});  // 在你的主组件中使用 Prompt 组件  
// 例如：  
function App() {  const [isVisible, setIsVisible] = useState(false);  const [input, setInput] = useState('');  const showPrompt = () => {  setIsVisible(true);  };  const handleClose = () => {  setIsVisible(false);  };  const handleSubmit = (value) => {  setInput(value);  console.log('Submitted value:', value);  handleClose();  };  return (  <View>  <TouchableOpacity onPress={showPrompt}>  <Text>显示 Prompt</Text>  </TouchableOpacity>  <Prompt  visible={isVisible}  onClose={handleClose}  onSubmit={handleSubmit}  />  {/* 显示提交的值或其他内容 */}  </View>  );  
}  export default App;