react-native弹窗Alert

刺骨的言语ヽ痛彻心扉 2022-05-22 10:06 249阅读 0赞

学习交流：[https://gitee.com/potato512/Learn\_ReactNative][https_gitee.com_potato512_Learn_ReactNative]

react-native学习交流QQ群：806870562

效果图

![70][]

代码示例

import React from 'react';
    import {View, Text, Button, Alert, AlertIOS} from "react-native";
    
    const title = "温馨提示";
    const message = '要下雨了，记得带伞'
    
    export default class AlertPage extends React.Component {
    
      constructor(props) {
          super(props);
          _this = this;
          this.state = {
              inputText:'',
          };
      }
    
       render(){
         return(
           <View style={
       {marginTop:60, alignItems:"center"}}>
             <Text>Alert的使用</Text>
             <Button title="标题+确定" onPress={() => {
               Alert.alert(title)
             }}/>
             <Button title="标题+内容+确定" onPress={() => {
               Alert.alert(title,message)
             }}/>
             <Button title="标题+内容+取消+确定" onPress={() => {
               Alert.alert(
                title,
                message,
                [
                  {text: '不带伞', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                  {text: '知道了', onPress: () => console.log('OK Pressed')},
                ],
              )
             }}/>
             <Button title="标题+内容+多按钮" onPress={() => {
               Alert.alert(
                title,
                message,
                [
                  {text: '不带伞', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                  {text: '知道了', onPress: () => console.log('OK Pressed')},
                  {text: '有人送伞', onPress: () => console.log('送伞')},
                ],
                {
                  cancelable: true,
                  onDismiss: () => {
                    ToastAndroid.show('点击了外面', ToastAndroid.SHORT)
                  }
                }
              )
             }}/>
             <Button title="iOS" onPress={() => {
               AlertIOS.alert(
                 title,
                 message,
                 [
                   {text: '取消',onPress: function() {console.log('取消按钮点击');}},
                   {text: '确认',onPress: function() {console.log('确认按钮点击');}},
                 ]
               )
             }}/>
             <Button title="iOS+输入框" onPress={() => {
               AlertIOS.prompt(
                 title,
                 message,
                 [
                   {text: '取消',onPress: function() {console.log('取消按钮点击');}},
                   {text: '确认',onPress: (text) => {
                     _this.setState({inputText:text})
                     console.log('你输入了: ' + _this.state.inputText)
                   }},
                 ],
                 'secure-text',
                 this.state.inputText,
                 'number-pad'
               )
             }}/>
    
    )
    
           </View>
         )
       }
    }

[https_gitee.com_potato512_Learn_ReactNative]: https://gitee.com/potato512/Learn_ReactNative
[70]: /images/20220522/394ffe53f2614b98aeac5dd2a0cc8064.png