Skip to content

Commit 46001a5

Browse files
cyqresigcyqresig
committed
finished first version
1 parent fa50a08 commit 46001a5

File tree

7 files changed

+453
-1
lines changed

7 files changed

+453
-1
lines changed

‎.gitignore

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
*.[aod]
2+
*.DS_Store
3+
.DS_Store
4+
*Thumbs.db
5+
*.iml
6+
.gradle
7+
.idea
8+
node_modules
9+
npm-debug.log
10+
/android/build
11+
/ios/**/*xcuserdata*
12+
/ios/**/*xcshareddata*

‎.npmignore

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
*.[aod]
2+
*.DS_Store
3+
.DS_Store
4+
*Thumbs.db
5+
*.iml
6+
.gradle
7+
.idea
8+
node_modules
9+
npm-debug.log
10+
/android/build
11+
/ios/**/*xcuserdata*
12+
/ios/**/*xcshareddata*

‎README.md

Lines changed: 221 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,222 @@
11
# react-native-smart-toast
2-
A android like toast for android and ios, written in JS.
2+
3+
[![npm](https://img.shields.io/npm/v/react-native-smart-toast.svg)](https://www.npmjs.com/package/react-native-smart-toast)
4+
[![npm](https://img.shields.io/npm/dm/react-native-smart-toast.svg)](https://www.npmjs.com/package/react-native-smart-toast)
5+
[![npm](https://img.shields.io/npm/dt/react-native-smart-toast.svg)](https://www.npmjs.com/package/react-native-smart-toast)
6+
[![npm](https://img.shields.io/npm/l/react-native-smart-toast.svg)](https://github.com/react-native-component/react-native-smart-toast/blob/master/LICENSE)
7+
8+
A android like toast for react-native apps, written in JS for cross-platform support.
9+
It works on iOS and Android.
10+
11+
This component is compatible with React Native 0.25 and newer.
12+
13+
## Preview
14+
15+
![react-native-smart-toast-preview-ios][1]
16+
![react-native-smart-toast-preview-android][2]
17+
18+
## Installation
19+
20+
```
21+
npm install react-native-smart-toast --save
22+
```
23+
24+
## Full Demo
25+
26+
see [ReactNativeComponentDemos][0]
27+
28+
## Usage
29+
30+
Install the toast from npm with `npm install react-native-smart-toast --save`.
31+
Then, require it from your app's JavaScript files with `import toast from 'react-native-smart-toast'`.
32+
33+
```js
34+
35+
import React, {
36+
Component,
37+
} from 'react'
38+
import {
39+
View,
40+
} from 'react-native'
41+
42+
import Button from 'react-native-smart-button'
43+
import TimerEnhance from 'react-native-smart-timer-enhance'
44+
import Toast from 'react-native-smart-toast'
45+
46+
class ToastText extends Component {
47+
48+
constructor(props) {
49+
super(props)
50+
this.state = {}
51+
}
52+
53+
render() {
54+
return (
55+
<View style={{ marginTop: 64, flex: 1, backgroundColor: '#fff',}}>
56+
<Button
57+
onPress={this._showTopToast}
58+
touchableType={Button.constants.touchableTypes.fadeContent}
59+
style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
60+
textStyle={{fontSize: 17, color: 'white'}}
61+
>
62+
show top (顶部显示)
63+
</Button>
64+
65+
<Button
66+
onPress={this._showCenterToast}
67+
touchableType={Button.constants.touchableTypes.highlight}
68+
underlayColor={'#C90000'}
69+
style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
70+
textStyle={{fontSize: 17, color: 'white'}}
71+
>
72+
show center (中心显示)
73+
</Button>
74+
75+
<Button
76+
onPress={this._showBottomToast}
77+
touchableType={Button.constants.touchableTypes.blur}
78+
style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
79+
textStyle={{fontSize: 17, color: 'white'}}
80+
81+
>
82+
show bottom (底部显示)
83+
</Button>
84+
<Button
85+
onPress={this._showFastToast}
86+
style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
87+
textStyle={{fontSize: 17, color: 'white'}}
88+
>
89+
show fast (快速显示)
90+
</Button>
91+
<Button
92+
onPress={this._showFastToastAndAnimatedHide}
93+
style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
94+
textStyle={{fontSize: 17, color: 'white'}}
95+
>
96+
show fast immediate hide
97+
</Button>
98+
<Button
99+
onPress={this._showImmediateToast}
100+
style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
101+
textStyle={{fontSize: 17, color: 'white'}}
102+
>
103+
show immediate (立即显示)
104+
</Button>
105+
<Button
106+
onPress={this._showImmediateToastAndAnimatedHide}
107+
style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
108+
textStyle={{fontSize: 17, color: 'white'}}
109+
>
110+
show immediate animated hide
111+
</Button>
112+
113+
<Toast ref={ component => this._toast = component }>
114+
Unable to connect to app store
115+
</Toast>
116+
</View>
117+
)
118+
}
119+
120+
_showTopToast = () => {
121+
this._toast.show({
122+
position: Toast.constants.gravity.top,
123+
})
124+
}
125+
126+
_showCenterToast = () => {
127+
this._toast.show({
128+
position: Toast.constants.gravity.center,
129+
})
130+
}
131+
132+
_showBottomToast = () => {
133+
this._toast.show({
134+
position: Toast.constants.gravity.bottom,
135+
})
136+
}
137+
138+
_showFastToast = () => {
139+
this._toast.show({
140+
position: Toast.constants.gravity.center,
141+
duration: 255,
142+
})
143+
}
144+
145+
_showFastToastAndAnimatedHide = () => {
146+
this._toast.show({
147+
position: Toast.constants.gravity.center,
148+
duration: 255,
149+
animationEnd : () => {
150+
this._toast._toastAnimationToggle = this.setTimeout( () => {
151+
this._toast.hide({
152+
duration: 0,
153+
animationEnd: () => {
154+
//do sth...
155+
}
156+
})
157+
}, 3000)
158+
}
159+
})
160+
}
161+
162+
_showImmediateToast = () => {
163+
this._toast.show({
164+
position: Toast.constants.gravity.center,
165+
duration: 0,
166+
})
167+
}
168+
_showImmediateToastAndAnimatedHide = () => {
169+
this._toast.show({
170+
position: Toast.constants.gravity.center,
171+
duration: 0,
172+
animationEnd : () => {
173+
this._toast._toastAnimationToggle = this.setTimeout( () => {
174+
this._toast.hide({
175+
animationEnd: () => {
176+
//do sth...
177+
}
178+
})
179+
}, 3000)
180+
}
181+
})
182+
}
183+
184+
}
185+
186+
187+
export default TimerEnhance(ToastText)
188+
```
189+
190+
## Props
191+
192+
Prop | Type | Optional | Default | Description
193+
----------- | ------ | -------- | ---------------- | -----------
194+
style | style | Yes | | see [react-native documents][3]
195+
textStyle | style | Yes | | see [react-native documents][4]
196+
spacing | number | Yes | 30 | determine the top or bottom spacing when the position is on the top or bottom
197+
position | style | Yes | constants.bottom | determine the position of toast
198+
duration | style | Yes | 510 | determine the duration of toast animation
199+
200+
## Method
201+
202+
* show({position, duration, easing, delay, animationEnd,})
203+
204+
* position: determine the position of toast. enum(gravity.bottom, gravity.top, gravity.center)
205+
* duration: determine the duration of animation
206+
* easing: determine the easing of animation
207+
* delay: determine the delay of animation
208+
* animationEnd: determine the callback when animation is end
209+
210+
* hide({duration, easing, delay, animationEnd,})
211+
212+
* duration: determine the duration of animation
213+
* easing: determine the easing of animation
214+
* delay: determine the delay of animation
215+
* animationEnd: determine the callback when animation is end
216+
217+
[0]: https://github.com/cyqresig/ReactNativeComponentDemos
218+
[1]: http://cyqresig.github.io/img/react-native-smart-toast-preview-ios-v1.0.0.gif
219+
[2]: http://cyqresig.github.io/img/react-native-smart-toast-preview-android-v1.0.0.gif
220+
[3]: https://facebook.github.io/react-native/docs/style.html
221+
[4]: http://facebook.github.io/react-native/docs/text.html#style
222+

0 commit comments

Comments
 (0)