Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> 一款簡單易用的 Toast 組件,支持 Android&iOS

一款簡單易用的 Toast 組件,支持 Android&iOS

編輯:關於Android編程

react-native-easy-toast

一款簡單易用的 Toast 組件,支持 Android&iOS。

安裝

1.在終端運行 npm i react-native-easy-toast --save 2.在要使用Toast的js文件中添加import Toast, {DURATION} from 'react-native-toast-easy'

Demo

Examples

Screenshots

如何使用?

第一步:

在你的js文件中導入 react-native-toast-easy:

import Toast, {DURATION} from 'react-native-toast-easy'

第二步:

將下面代碼插入到render()方法中:

 render() {
         return (
             
                 ...
                 
             
         );
 }

注意: 請將 放在最外層View的底部.

第三步:

使用:

 this.refs.toast.show('hello world!');

在需要彈出提示框時使用上面代碼即可。

用例

render() {
        return (
            
                {
                        this.refs.toast.show('hello world!');
                    }}>
                    Press me
                
                
            
        );
    }

自定義 Toast

render() {
        return (
            
                {
                        this.refs.toast.show('hello world!',DURATION.LENGTH_LONG);
                    }}>
                    Press me
                
                
            
        );
    }

更多用例:

SearchPage.js@GitHubPopular

API

屬性 類型 可選 默認值 描述 style View.propTypes.style true {backgroundColor: ‘black’,opacity: OPACITY,borderRadius: 5,padding: 10,} 自定義Toast的樣式 position PropTypes.oneOf([‘top’,’center’,’bottom’,]) true ‘bottom’ 自定義Toast的位置 方法 類型 可選 描述 show(text, duration) function false 彈出提示框 close() function true 手動關閉提示框

貢獻

歡迎大家提Issues。如果能為Issues配一個異常或報錯的截圖,能幫助我快速的定位問題和解決問題。
另外歡迎大家Pull requests,為項目貢獻的智慧。


MIT Licensed
大家可以自由復制和轉載。

最後

既然來了,留下個喜歡再走吧,鼓勵我繼續創作(^_^)∠※

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