Skip to content

Commit 8e0a981

Browse files
crazycodeboycrazycodeboy
committed
publish v2.2.0
1 parent fd914b1 commit 8e0a981

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+9227
-1026
lines changed

‎README.md

+59-67
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,6 @@ A react native module to show toast like android, it works on iOS and Android.
77
[![License MIT](http://img.shields.io/badge/license-MIT-orange.svg?style=flat)](https://raw.githubusercontent.com/crazycodeboy/react-native-easy-toast/master/LICENSE)
88
[ ![语言 中文](https://img.shields.io/badge/语言-中文-yellow.svg)](https://github.com/crazycodeboy/react-native-easy-toast/blob/master/README.zh.md)
99

10-
11-
12-
1310
## Content
1411

1512
- [Installation](#installation)
@@ -21,67 +18,70 @@ A react native module to show toast like android, it works on iOS and Android.
2118
## Installation
2219

2320
* 1.Run `npm i react-native-easy-toast --save`
24-
* 2.`import Toast, {DURATION} from 'react-native-easy-toast'`
21+
* or `yarn add react-native-easy-toast`
22+
* 2.`import Toast, {DURATION} from 'react-native-easy-toast'`
2523

26-
## Demo
24+
## Demo
2725
* [Examples](https://github.com/crazycodeboy/react-native-easy-toast/tree/master/examples)
2826

2927
![Screenshots](https://raw.githubusercontent.com/crazycodeboy/react-native-easy-toast/master/examples/Screenshots/react-native-easy-toast-screenshots.gif)
3028

31-
## Getting started
29+
## Getting started
3230

33-
Add `react-native-easy-toast` to your js file.
31+
Add `react-native-easy-toast` to your js file.
3432

35-
`import Toast, {DURATION} from 'react-native-easy-toast'`
33+
`import Toast, {DURATION} from 'react-native-easy-toast'`
3634

37-
Inside your component's render method, use Toast:
35+
Inside your component's render method, use Toast:
3836

3937
```javascript
4038
render() {
41-
return (
42-
<View style={styles.container}>
43-
...
44-
<Toast ref="toast"/>
45-
</View>
46-
);
39+
return (
40+
<View>
41+
...
42+
<Toast ref={(toast) => this.toast = toast}/>
43+
</View>
44+
);
4745
}
4846
```
4947

50-
>Note: Add it in the bottom of the root view.
48+
><span style="color:red">Note: Be sure to add `Toast` to the bottom of the root view.</span>
5149
52-
Then you can use it like this:
50+
51+
Then you can use it like this:
5352

5453
```javascript
55-
this.refs.toast.show('hello world!');
54+
this.toast.show('hello world!');
5655
```
5756

58-
That's it, you're ready to go!
57+
That's it, you're ready to go!
5958

6059
show a toast, and execute callback function when toast close it:
6160

6261
```javascript
63-
this.refs.toast.show('hello world!', 500, () => {
64-
// something you want to do at close
65-
});
62+
this.toast.show('hello world!', 500, () => {
63+
// something you want to do at close
64+
});
6665
```
6766

6867
Show a toast forever until you manually close it:
68+
6969
```javascript
70-
this.refs.toast.show('hello world!', DURATION.FOREVER);
70+
this.toast.show('hello world!', DURATION.FOREVER);
7171
```
7272

7373
Or pass an element:
74-
```javascript
75-
this.refs.toast.show(<View><Text>hello world!</Text></View>);
76-
```
7774

75+
```javascript
76+
this.toast.show(<View><Text>hello world!</Text></View>);
7877
// later on:
79-
this.refs.toast.close('hello world!');
78+
this.toast.close('hello world!');
8079
```
8180

8281
Optional you can pass a delay in seconds to the close()-method:
82+
8383
```javascript
84-
this.refs.toast.close('hello world!', 500);
84+
this.toast.close('hello world!', 500);
8585
```
8686

8787
Currently, the default delay for close() in FOREVER-mode is set to 250 ms (or this.props.defaultCloseDelay, which you can pass with)
@@ -92,54 +92,46 @@ Currently, the default delay for close() in FOREVER-mode is set to 250 ms (or th
9292

9393

9494

95-
### Basic usage
95+
### Basic usage
9696

9797
```javascript
9898
render() {
99-
return (
100-
<View style={styles.container}>
101-
<TouchableHighlight
102-
style={{padding: 10}}
103-
onPress={()=>{
104-
this.refs.toast.show('hello world!');
105-
}}>
106-
<Text>Press me</Text>
107-
</TouchableHighlight>
108-
<Toast ref="toast"/>
109-
</View>
110-
);
99+
return (
100+
<View>
101+
<Button title={'Press me'} onPress={()=>{
102+
this.toast.show('hello world!',2000);
103+
}}/>
104+
<Toast ref={(toast) => this.toast = toast}/>
105+
</View>
106+
);
111107
}
112108
```
113109

114-
### Custom Toast
110+
### Custom Toast
115111

116112
```javascript
117113
render() {
118-
return (
119-
<View style={styles.container}>
120-
<TouchableHighlight
121-
style={{padding: 10}}
122-
onPress={()=>{
123-
this.refs.toast.show('hello world!',DURATION.LENGTH_LONG);
124-
}}>
125-
<Text>Press me</Text>
126-
</TouchableHighlight>
127-
<Toast
128-
ref="toast"
129-
style={{backgroundColor:'red'}}
130-
position='top'
131-
positionValue={200}
132-
fadeInDuration={750}
133-
fadeOutDuration={1000}
134-
opacity={0.8}
135-
textStyle={{color:'red'}}
136-
/>
137-
</View>
138-
);
139-
}
114+
return (
115+
<View>
116+
<Button title={'Press me'} onPress={()=>{
117+
this.toast.show('hello world!',2000);
118+
}}/>
119+
<Toast
120+
ref={(toast) => this.toast = toast}
121+
style={{backgroundColor:'red'}}
122+
position='top'
123+
positionValue={200}
124+
fadeInDuration={750}
125+
fadeOutDuration={1000}
126+
opacity={0.8}
127+
textStyle={{color:'red'}}
128+
/>
129+
</View>
130+
);
131+
}
140132
```
141133

142-
**More Usage:**
134+
**More Usage:**
143135

144136
[GitHubPopular](https://github.com/crazycodeboy/GitHubPopular/blob/develop/js/page/SearchPage.js)
145137

@@ -162,8 +154,8 @@ textStyle | View.propTypes.style | true | {color:'white'} | Custom style te
162154

163155
Method | Type | Optional | Description
164156
----------------- | -------- | -------- | -----------
165-
show(text, duration, callback) | function | false | show a toast,unit is millisecond，and do callback
166-
close() | function | - | start the close timer
157+
show(text, duration, callback, onPress) | function | false | show a toast,unit is millisecond，and do callback
158+
close() | function | - | start the close timer
167159

168160

169161
## Contribution

‎README.zh.md

+56-61
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
# [react-native-easy-toast](https://github.com/crazycodeboy/react-native-easy-toast/)
1+
# react-native-easy-toast
2+
23
一款简单易用的 Toast 组件，支持 Android&iOS。
34

45
[ ![release](https://img.shields.io/github/release/crazycodeboy/react-native-easy-toast.svg?maxAge=2592000?style=flat-square)](https://github.com/crazycodeboy/react-native-easy-toast/releases)
@@ -21,106 +22,100 @@
2122
## 安装
2223

2324
* 1.在终端运行 `npm i react-native-easy-toast --save`
24-
* 2.在要使用`Toast`的js文件中添加`import Toast, {DURATION} from 'react-native-easy-toast'`
25+
* 或者 `yarn add react-native-easy-toast`
26+
* 2.在要使用`Toast`的js文件中添加`import Toast, {DURATION} from 'react-native-easy-toast'`
2527

26-
## Demo
28+
## Demo
2729
* [Examples](https://github.com/crazycodeboy/react-native-easy-toast/tree/master/examples)
2830

2931
![Screenshots](https://raw.githubusercontent.com/crazycodeboy/react-native-easy-toast/master/examples/Screenshots/react-native-easy-toast-screenshots.gif)
3032

31-
## 如何使用？
33+
## 如何使用？
3234

3335
>第一步：
3436
35-
在你的js文件中导入 `react-native-easy-toast`：
37+
在你的js文件中导入 `react-native-easy-toast`：
3638

37-
`import Toast, {DURATION} from 'react-native-easy-toast'`
39+
`import Toast, {DURATION} from 'react-native-easy-toast'`
3840

39-
>第二步：
41+
>第二步：
4042
41-
将下面代码插入到`render()`方法中：
43+
将下面代码插入到`render()`方法中：
4244

4345

4446
```javascript
4547
render() {
46-
return (
47-
<View style={styles.container}>
48-
...
49-
<Toast ref="toast"/>
50-
</View>
51-
);
48+
return (
49+
<View>
50+
...
51+
<Toast ref={(toast) => this.toast = toast}/>
52+
</View>
53+
);
5254
}
5355
```
5456

55-
>注意: 请将`<Toast ref="toast"/>` 放在最外层View的底部.
57+
><span style="color:red">注意: 请将`<Toast ref={(toast) => this.toast = toast}/>` 放在最外层View的底部。</span>
58+
5659

5760
>第三步：
5861
59-
使用：
62+
使用：
6063

6164
```javascript
62-
this.refs.toast.show('hello world!');
65+
this.toast.show('hello world!');
6366
```
6467

6568
在需要弹出提示框时使用上面代码即可。
6669

6770
或者像这样
71+
6872
```javascript
69-
this.refs.toast.show(<View><Text>hello world!</Text></View>);
73+
this.toast.show(<View><Text>hello world!</Text></View>);
7074
```
7175

7276

73-
### 用例
77+
### 用例
7478

7579
```javascript
7680
render() {
77-
return (
78-
<View style={styles.container}>
79-
<TouchableHighlight
80-
style={{padding: 10}}
81-
onPress={()=>{
82-
this.refs.toast.show('hello world!');
83-
}}>
84-
<Text>Press me</Text>
85-
</TouchableHighlight>
86-
<Toast ref="toast"/>
87-
</View>
88-
);
81+
return (
82+
<View>
83+
<Button title={'Press me'} onPress={()=>{
84+
this.toast.show('hello world!',2000);
85+
}}/>
86+
<Toast ref={(toast) => this.toast = toast}/>
87+
</View>
88+
);
8989
}
9090
```
9191

92-
### 自定义 Toast
92+
### 自定义 Toast
9393

9494
```javascript
9595
render() {
96-
return (
97-
<View style={styles.container}>
98-
<TouchableHighlight
99-
style={{padding: 10}}
100-
onPress={()=>{
101-
this.refs.toast.show('hello world!',DURATION.LENGTH_LONG);
102-
}}>
103-
<Text>Press me</Text>
104-
</TouchableHighlight>
105-
<Toast
106-
ref="toast"
107-
style={{backgroundColor:'red'}}
108-
position='top'
109-
positionValue={200}
110-
fadeInDuration={750}
111-
fadeOutDuration={1000}
112-
opacity={0.8}
113-
textStyle={{color:'red'}}
114-
/>
115-
</View>
116-
);
117-
}
96+
return (
97+
<View>
98+
<Button title={'Press me'} onPress={()=>{
99+
this.toast.show('hello world!',2000);
100+
}}/>
101+
<Toast
102+
ref={(toast) => this.toast = toast}
103+
style={{backgroundColor:'red'}}
104+
position='top'
105+
positionValue={200}
106+
fadeInDuration={750}
107+
fadeOutDuration={1000}
108+
opacity={0.8}
109+
textStyle={{color:'red'}}
110+
/>
111+
</View>
112+
);
113+
}
118114
```
119115

116+
**更多用例:**
120117

121-
**更多用例:**
122-
123-
[SearchPage.js@GitHubPopular](https://github.com/crazycodeboy/GitHubPopular/blob/develop/js/page/SearchPage.js)
118+
[GitHubPopular](https://github.com/crazycodeboy/GitHubPopular/blob/develop/js/page/SearchPage.js)
124119

125120

126121

@@ -140,8 +135,8 @@ textStyle | View.propTypes.style | true | {color:'white'} | 自定义text的
140135

141136
方法 | 类型 | 可选 | 描述
142137
----------------- | -------- | -------- | ----------- | -----------
143-
show(text, duration) | function | false | 弹出提示框,单位是毫秒
144-
close() | function | true | 手动关闭提示框
138+
show(text, duration, callback, onPress) | function | false | 弹出提示框,单位是毫秒
139+
close() | function | true | 手动关闭提示框
145140

146141

147142
## 贡献
@@ -151,5 +146,5 @@ close() | function | true | 手动关闭提示框
151146

152147
---
153148

154-
**MIT Licensed**
155-
大家可以自由复制和转载。
149+
**MIT Licensed**
150+
大家可以自由复制和转载。

‎examples/.eslintrc.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
root: true,
3+
extends: '@react-native-community',
4+
};

0 commit comments

Comments
 (0)