react-native弹窗Alert

学习交流：https://gitee.com/potato512/Learn_ReactNative

react-native学习交流QQ群：806870562

效果图

代码示例

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,{text: '有人送伞',onPress: () => console.log('送伞')},{
              cancelable: true,ondismiss: () => {
                ToastAndroid.show('点击了外面',ToastAndroid.SHORT)
              }
            }
          )
         }}/>
         <Button title="iOS" onPress={() => {
           AlertIOS.alert(
             title,[
               {text: '取消',onPress: function() {console.log('取消按钮点击');}},{text: '确认',onPress: function() {console.log('确认按钮点击');}},]
           )
         }}/>
         <Button title="iOS+输入框" onPress={() => {
           AlertIOS.prompt(
             title,onPress: (text) => {
                 _this.setState({inputText:text})
                 console.log('你输入了: ' + _this.state.inputText)
               }},'secure-text',this.state.inputText,'number-pad'
           )
         }}/>

)

       </View>
     )
   }
}

原文地址：https://www.jb51.cc/react/301426.html