Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> ReactNative Alert詳解及實例代碼

ReactNative Alert詳解及實例代碼

編輯:關於Android編程

Alert顧名思義一就是一個警告框,一般使用情況比如:退出登錄,清楚緩存,提示修改密碼等等。。。ReactNative中的Alert只有一個靜態方法alert()其中有四個參數:標題,信息,按鈕和按鈕類型 在Android按鈕至多有三個 下面是使用情況:

實例代碼:

/**
 * Created by Administrator on 2016/9/12.
 */
import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  Alert,
} from 'react-native';

class AlertG extends Component {
  render() {
    return (

      <View style={{flex: 1}}>
        <Text
          style={styles.text}
          onPress={()=> this.showOneAlert()}>One</Text>
        <Text
          style={styles.text}
          onPress={()=> this.showTwoAlert()}>Two</Text>
        <Text
          style={styles.text}
          onPress={()=> this.showThreeAlert()}>Three</Text>
      </View>

    )
  }


  showOneAlert() {
    Alert.alert(
      'Alert 標題',
      '只有一個按鈕',
      [
        /**
         * 注意參數名字一定不能錯
         */
        {text: '確定', onPress: ()=> console.log('點擊確定')}
      ]);
  }

  showTwoAlert() {
    Alert.alert(
      'Alert 標題',
      '兩個按鈕',
      [
        {text: '確定', onPress: ()=> console.log('點擊確定')},
        {text: '取消', onPress: ()=> console.log('點擊取消')}
      ]
    );
  }

  showThreeAlert() {
    Alert.alert(
      'Alert 標題',
      '三個按鈕',
      [
        //第一個和第二個按鈕的位置會顛倒
        {text: '取消', onPress: ()=> console.log('點擊取消')},
        {text: '確定', onPress: ()=> console.log('點擊確定')},
        {text: '稍後', onPress: ()=> console.log('點擊稍後')},
      ]
    );
  }
}

const styles = StyleSheet.create({
  text: {
    fontSize: 28
  }
})

module.exports = AlertG;

感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved