Skip to content

Commit eda1a0f

Browse files
author
yinyongqian
committed
升级到0.1.0，新增RRCToast，优化Alert和Loading的options配置
1 parent 531b4f3 commit eda1a0f

File tree

13 files changed

+9393
-139
lines changed

13 files changed

+9393
-139
lines changed

‎App.js‎

Lines changed: 85 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
/*
2+
* @Author: yinyongqian
3+
* @Description:
4+
* @Date: 2018-11-13 14:45:11
5+
* @LastEditors: yinyongqian
6+
* @LastEditTime: 2019-02-19 10:18:39
7+
*/
8+
19
/**
210
* Sample React Native App
311
* https://github.com/facebook/react-native
@@ -10,33 +18,47 @@ import {
1018
Text,
1119
View,
1220
TouchableOpacity,
13-
Dimensions
21+
Dimensions,
22+
ScrollView
1423
} from 'react-native';
15-
import { RRCAlert, RRCLoading } from './src';
16-
import LoadingImage from './src/img/loading.gif';
24+
import { RRCAlert, RRCLoading, RRCToast } from './src';
25+
import LoadingImage from './src/img/car_list_loading.gif';
26+
import AlertImage from './src/img/alert.png';
27+
import SuccessImage from './src/img/success.png';
28+
1729
export default class App extends Component {
1830
constructor(props) {
1931
super(props);
2032
RRCLoading.setLoadingOptions({
21-
loadingImage: LoadingImage,
2233
text: 'gogogo',
23-
loadingBackgroundColor: 'rgba(0,0,0,0.5)',
24-
loadingViewBackgroundColor: 'rgba(0,0,0,0)'
34+
loadingBackgroundColor: 'rgba(0,0,0,0.0)',
35+
loadingImage: LoadingImage,
36+
loadingViewStyle: { backgroundColor: 'rgba(0,0,0,0.8)' },
37+
loadingTextStyle: {}
2538
})
26-
RRCAlert.setAlertOptions({
27-
alertBackgroundColor: 'rgba(0,0,0,0.3)'
39+
// RRCAlert.setAlertOptions({
40+
// alertBackgroundColor: 'rgba(0,0,0,0.3)',
41+
// titleViewStyle: {},
42+
// titleTextStyle: {},
43+
// contentTextStyle: {}
44+
// })
45+
RRCToast.setToastOptions({
46+
toastIcons: [AlertImage, SuccessImage],
47+
toastBackgroundColor: 'rgba(0,0,0,0)',
48+
toastViewStyle: {},
49+
toastTextStyle: {},
50+
durationTime: 3000
2851
})
2952
}
3053
render() {
3154
return (
32-
<View style={styles.container}>
55+
<ScrollView style={{flex: 1, marginBottom: 44, marginTop: 34}}>
3356
<TouchableOpacity onPress={() => {
34-
RRCLoading.show('努力加载中...')
57+
RRCLoading.show('加载中...')
3558
RRCLoading.setLoadingOptions({
36-
loadingImage: '',
3759
text: 'gogogo',
3860
loadingBackgroundColor: 'rgba(0,0,0,0)',
39-
loadingViewBackgroundColor: 'rgba(0,0,0,0.9)'
61+
loadingViewStyle: { backgroundColor: 'rgba(0,0,0,0.9)' }
4062
})
4163
setTimeout(() => {
4264
RRCLoading.hide()
@@ -51,7 +73,7 @@ export default class App extends Component {
5173
}}>
5274
<Text style={styles.welcome}>
5375
Alert normal
54-
</Text>
76+
</Text>
5577
</TouchableOpacity>
5678

5779

@@ -62,15 +84,15 @@ export default class App extends Component {
6284
text: 'loading',
6385
loadingImage: ''
6486
})
65-
RRCLoading.show('Loading...')
87+
RRCLoading.show('加载中')
6688
}, 1000);
6789
setTimeout(() => {
6890
RRCLoading.hide()
6991
}, 3000);
7092
}}>
7193
<Text style={styles.welcome}>
7294
Alert normal >> show loading after 1s >> hide loading after 3s
73-
</Text>
95+
</Text>
7496
</TouchableOpacity>
7597

7698
<TouchableOpacity onPress={() => {
@@ -81,34 +103,38 @@ export default class App extends Component {
81103
}}>
82104
<Text style={styles.welcome}>
83105
Alert nothing and show loading
84-
</Text>
106+
</Text>
85107
</TouchableOpacity>
86108

87109
<TouchableOpacity onPress={() => {
88110
RRCAlert.alert('title title')
89111
}}>
90112
<Text style={styles.welcome}>
91113
Alert title only
92-
</Text>
114+
</Text>
93115
</TouchableOpacity>
94116
<TouchableOpacity onPress={() => {
95117
RRCAlert.alert('only title && very looooooooooooooooooooooooooooooong')
96118
}}>
97119
<Text style={styles.welcome}>
98120
Alert long title only
99-
</Text>
121+
</Text>
100122
</TouchableOpacity>
101123
<TouchableOpacity onPress={() => {
102124
RRCAlert.alert(
103125
null,
104-
'content content content content content content content content content content ',
126+
'这是Alert的内容，如果内容很多会自动折行，行高20 ',
105127
[{ text: '确定' }]
106128
)
129+
// 可以中途修改样式
130+
// RRCAlert.setAlertOptions({
131+
// contentTextStyle: {backgroundColor: 'red'}
132+
// })
107133

108134
}}>
109135
<Text style={styles.welcome}>
110136
Alert content only
111-
</Text>
137+
</Text>
112138
</TouchableOpacity>
113139
<TouchableOpacity onPress={() => {
114140
RRCAlert.alert(
@@ -122,18 +148,12 @@ export default class App extends Component {
122148
}],
123149
(index) => {
124150
console.log(`index = ${index} clicked`);
125-
},
126-
{
127-
contentTextStyle: {
128-
fontSize: 14,
129-
textAlign: 'left'
130-
}
131151
}
132152
)
133153
}}>
134154
<Text style={styles.welcome}>
135155
Alert mutltiple lines
136-
</Text>
156+
</Text>
137157
</TouchableOpacity>
138158

139159

@@ -157,10 +177,45 @@ export default class App extends Component {
157177
}}>
158178
<Text style={styles.welcome}>
159179
Alert with three buttons >> Alert normal after 2s
160-
</Text>
180+
</Text>
181+
</TouchableOpacity>
182+
<TouchableOpacity onPress={() => {
183+
RRCAlert.alert('normal');
184+
RRCToast.show('操作成功，可以继续', 1, 1000);
185+
}}>
186+
<Text style={styles.welcome}>
187+
show toast and alert
188+
</Text>
161189
</TouchableOpacity>
162190

163-
</View>
191+
<TouchableOpacity onPress={() => {
192+
RRCToast.show('操作成功');
193+
}}>
194+
<Text style={styles.welcome}>
195+
show toast text only (one line)
196+
</Text>
197+
</TouchableOpacity>
198+
199+
<TouchableOpacity onPress={() => {
200+
RRCToast.show('操作成功，可以继续，操作成功，可以继续，操作成功，可以继续，操作成功，可以继续，5s后消失', null, 5000);
201+
}}>
202+
<Text style={styles.welcome}>
203+
show toast text only (multiple lines)
204+
</Text>
205+
</TouchableOpacity>
206+
207+
<TouchableOpacity onPress={() => {
208+
RRCLoading.show('正在上传图片...');
209+
setTimeout(() => {
210+
RRCLoading.hide()
211+
RRCToast.show('操作成功', 1);
212+
}, 2000);
213+
}}>
214+
<Text style={styles.welcome}>
215+
loading 2s later hide loading and show toast
216+
</Text>
217+
</TouchableOpacity>
218+
</ScrollView>
164219
);
165220
}
166221
}
@@ -170,8 +225,7 @@ const styles = StyleSheet.create({
170225
flex: 1,
171226
justifyContent: 'center',
172227
alignItems: 'center',
173-
// backgroundColor: '#fd521d'
174-
228+
backgroundColor: '#ccc'
175229
},
176230
welcome: {
177231
fontSize: 20,

‎README.md‎

Lines changed: 72 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ react-native项目中通用的浮层组件
55
# 功能
66
* **通用RRCAlert组件**
77
* **通用RRCLoading组件**
8+
* **通用RRCToast组件**
89

910
# install
1011

11-
npm i react-native-overlayer --save
12+
npm i react-native-overlayer --save
1213

1314
# 效果
1415

@@ -20,17 +21,23 @@ react-native项目中通用的浮层组件
2021
import { RRCAlert } from 'react-native-overlayer';
2122
...
2223
RRCAlert.setAlertOptions({
23-
alertBackgroundColor: 'rgba(0,0,0,0.3)' // alert蒙层的背景色
24+
alertBackgroundColor: 'rgba(0,0,0,0.3)', // alert蒙层的背景色
25+
titleViewStyle: {},
26+
titleTextStyle: {},
27+
contentTextStyle: {}
2428
})
25-
RRCAlert.alert(title, content, buttons, callback, options);
26-
27-
> 注意与RRCLoading的Options的设置方式的区别
29+
...
30+
RRCAlert.alert(title, content, buttons, callback);
31+
32+
* **`setAlertOptions` options**
2833

29-
* options
34+
|key|type|default value | desc |
35+
|:--:|:--:|:--:|:--:|
36+
|alertBackgroundColor|string|rgba(0,0,0,0.3)|弹框蒙层背景色 |
37+
|titleViewStyle|object|-|弹框标题View扩展样式 |
38+
|titleTextStyle|object|-|弹框标题文本扩展样式 |
39+
|contentTextStyle|object|-|弹框内容文本扩展样式 |
3040

31-
|key|default value | desc |
32-
|:--:|:--:|:--:|
33-
|contentTextStyle|null|弹框content的文本样式 |
3441

3542
* 当 buttons.length > 2 时，弹窗中的按钮按纵向排列
3643

@@ -39,22 +46,29 @@ react-native项目中通用的浮层组件
3946
* 引用
4047

4148
import { RRCLoading } from 'react-native-overlayer';
42-
import LoadingImage from './src/loading.gif';
49+
import LoadingImage from './src/img/loading.gif';
4350
...
44-
const options = { loadingImage: LoadingImage, text: 'gogogo' };
45-
RRCLoading.setLoadingOptions(options);
51+
RRCLoading.setLoadingOptions({
52+
text: 'gogogo',
53+
loadingBackgroundColor: 'rgba(0,0,0,0.0)',
54+
loadingImage: LoadingImage,
55+
loadingViewStyle: {backgroundColor: 'rgba(0,0,0,0.8)'},
56+
loadingTextStyle: {}
57+
})
4658

4759
RRCLoading.show();
4860

4961
RRCLoading.hide();
50-
* options
51-
52-
|key|default value | desc |
53-
|:--:|:--:|:--:|
54-
| loadingImage |null|图片（gif） |
55-
| text |加载中...|loading框中显示的文本 |
56-
|loadingBackgroundColor| rgba(0,0,0,0.3) | 蒙层背景色|
57-
|loadingViewBackgroundColor | rgba(0,0,0,0) | loading框的颜色|
62+
63+
* **`setLoadingOptions` oprions**
64+
65+
|key|type|default value | desc |
66+
|:--:|:--:|:--:|:--:|
67+
| text |string|加载中...|loading框中显示的文本 |
68+
| loadingBackgroundColor |string| rgba(0,0,0,0) | 蒙层背景色|
69+
| loadingImage |Image| - |图片（gif） |
70+
| loadingViewStyle |object|-| loading框view的扩展样式|
71+
| loadingTextStyle |object| - | loading框的文本扩展样式|
5872

5973
* 在android中使用gif图需要添加额外配置，在`android/app/build.gradle`中添加如下代码
6074

@@ -63,6 +77,38 @@ react-native项目中通用的浮层组件
6377
compile 'com.facebook.fresco:animated-gif:1.3.0'
6478
}
6579

80+
## RRCToast
81+
* 引用
82+
83+
import { RRCLoading } from 'react-native-overlayer';
84+
import AlertImage from './src/img/alert.png';
85+
import SuccessImage from './src/img/success.png';
86+
...
87+
RRCToast.setToastOptions({
88+
toastIcons: [AlertImage, SuccessImage],
89+
toastBackgroundColor: 'rgba(0,0,0,0)',
90+
toastViewStyle: {},
91+
toastTextStyle: {},
92+
durationTime: 3000
93+
})
94+
...
95+
RRCToast.show(toastText, iconIndex, duration);
96+
97+
> iconIndex: toast可以附带一个icon， toastIcons[iconIndex]
98+
99+
* **`setToastOptions` options**
100+
101+
|key|type|default value | desc |
102+
|:--:|:--:|:--:|:--:|
103+
| toastIcons | array |-|toast附带的icon数组 |
104+
| toastBackgroundColor | string |rgba(0,0,0,0)|toast蒙层背景色 |
105+
| toastViewStyle |object|-|toast扩展样式 |
106+
| toastTextStyle | object |-|toast文本扩展样式 |
107+
| durationTime |number| 200 |toast展示的时长 |
108+
109+
110+
111+
66112
## Alert和Loading同时出现
67113

68114
|场景|效果|
@@ -96,3 +142,9 @@ react-native项目中通用的浮层组件
96142

97143
return AppRegistry.registerComponentOld(appKey, () => RootElement);
98144
}
145+
146+
# 更新说明
147+
### 0.1.0
148+
- 新增`RRCToast`
149+
- `RRCAlert.alert()`不再接收`options`参数
150+
- 各个组件统一使用`set***Options`的方式设置属性、样式

0 commit comments

Comments
 (0)