Skip to content

Commit 531b4f3

Browse files
author
yinyongqian
committed
Loading和Alert可以自定义背景色了，更新了一些图片资源
1 parent 8a613a5 commit 531b4f3

File tree

9 files changed

+160
-111
lines changed

9 files changed

+160
-111
lines changed

‎App.js‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
StyleSheet,
1010
Text,
1111
View,
12-
Image,
1312
TouchableOpacity,
1413
Dimensions
1514
} from 'react-native';
@@ -18,13 +17,27 @@ import LoadingImage from './src/img/loading.gif';
1817
export default class App extends Component {
1918
constructor(props) {
2019
super(props);
21-
RRCLoading.setLoadingOptions({ loadingImage: LoadingImage, text: 'gogogo' })
20+
RRCLoading.setLoadingOptions({
21+
loadingImage: LoadingImage,
22+
text: 'gogogo',
23+
loadingBackgroundColor: 'rgba(0,0,0,0.5)',
24+
loadingViewBackgroundColor: 'rgba(0,0,0,0)'
25+
})
26+
RRCAlert.setAlertOptions({
27+
alertBackgroundColor: 'rgba(0,0,0,0.3)'
28+
})
2229
}
2330
render() {
2431
return (
2532
<View style={styles.container}>
2633
<TouchableOpacity onPress={() => {
27-
RRCLoading.show()
34+
RRCLoading.show('努力加载中...')
35+
RRCLoading.setLoadingOptions({
36+
loadingImage: '',
37+
text: 'gogogo',
38+
loadingBackgroundColor: 'rgba(0,0,0,0)',
39+
loadingViewBackgroundColor: 'rgba(0,0,0,0.9)'
40+
})
2841
setTimeout(() => {
2942
RRCLoading.hide()
3043
}, 2000);
@@ -45,6 +58,10 @@ export default class App extends Component {
4558
<TouchableOpacity onPress={() => {
4659
RRCAlert.alert('loading and alert')
4760
setTimeout(() => {
61+
RRCLoading.setLoadingOptions({
62+
text: 'loading',
63+
loadingImage: ''
64+
})
4865
RRCLoading.show('Loading...')
4966
}, 1000);
5067
setTimeout(() => {

‎README.md‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,19 @@ react-native项目中通用的浮层组件
1212

1313
# 效果
1414

15-
![](./countdown.gif)
16-
15+
![](./assets/overlayer.gif)
16+
![](./assets/loadingstyle.png)
1717
## RRCAlert
1818
* 引用
1919

2020
import { RRCAlert } from 'react-native-overlayer';
2121
...
22+
RRCAlert.setAlertOptions({
23+
alertBackgroundColor: 'rgba(0,0,0,0.3)' // alert蒙层的背景色
24+
})
2225
RRCAlert.alert(title, content, buttons, callback, options);
26+
27+
> 注意与RRCLoading的Options的设置方式的区别
2328

2429
* options
2530

@@ -48,6 +53,8 @@ react-native项目中通用的浮层组件
4853
|:--:|:--:|:--:|
4954
| loadingImage |null|图片（gif） |
5055
| text |加载中...|loading框中显示的文本 |
56+
|loadingBackgroundColor| rgba(0,0,0,0.3) | 蒙层背景色|
57+
|loadingViewBackgroundColor | rgba(0,0,0,0) | loading框的颜色|
5158

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

‎assets/alert.png‎

33.4 KB
Loading

‎assets/loadingImageDetail.png‎

47.9 KB
Loading

‎assets/loadingstyle.png‎

54.4 KB
Loading

countdown.gif renamed to assets/overlayer.gif

File renamed without changes.

‎src/RRCAlert.js‎

Lines changed: 112 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,22 @@ import {
66
TouchableOpacity,
77
} from 'react-native';
88
import RRCTopView from './RRCTopView';
9-
const { width } = Dimensions.get('window')
9+
const { width, height } = Dimensions.get('window')
1010
const borderRadius = 10;
1111
const backgroundColor = 'rgba(0,0,0,0.1)';
1212
const titleTextFontSize = 16;
1313
const buttonTextFontSize = 16;
1414
const contentTextFontSize = 14;
1515

16+
let AlertOptions = {}
17+
1618
export default class OverlayAlert {
19+
static setAlertOptions(options = {}) {
20+
if (options.alertBackgroundColor != undefined) {
21+
AlertOptions.alertBackgroundColor = options.alertBackgroundColor;
22+
}
23+
}
24+
1725
static alert(title, content, buttons, Callback, options) {
1826
title = title || '';
1927
content = content || '';
@@ -27,107 +35,110 @@ export default class OverlayAlert {
2735
buttons = [{ text: 'OK', style: { color: '#fd521d', fontWeight: 'bold' } }]
2836
}
2937
let key;
38+
const alertBackgroundColor = AlertOptions.alertBackgroundColor ? AlertOptions.alertBackgroundColor : 'rgba(0,0,0,0.3)'
3039
const overlayView = (
31-
<View style={{ width: width * 0.7, borderRadius, backgroundColor: '#fff', overflow: 'hidden' }}>
32-
{
33-
title.length > 0 ?
34-
<View style={{
35-
padding: content.length < 1 ? 20 : 10,
36-
justifyContent: 'center',
37-
alignItems: 'center',
38-
borderTopLeftRadius: borderRadius,
39-
borderTopRightRadius: borderRadius
40-
}}>
41-
<Text style={{ fontSize: titleTextFontSize, fontWeight: 'bold' }}>{title}</Text>
42-
</View>
43-
:
44-
<View style={{
45-
height: borderRadius + 5,
46-
borderTopLeftRadius: borderRadius,
47-
borderTopRightRadius: borderRadius
48-
}} />
49-
}
50-
{
51-
content.length > 0 ?
52-
<Text style={[{
53-
fontSize: contentTextFontSize,
54-
padding: 20,
55-
paddingTop: 5,
56-
textAlign: 'center',
57-
}, { ...options.contentTextStyle }]}>
58-
{content}
59-
</Text>
60-
: null
61-
}
62-
<View style={{
63-
height: 1,
64-
backgroundColor,
65-
flex: 1
66-
}} />
67-
{
68-
buttons.length < 3 ?
69-
<View style={{
70-
height: 44,
71-
flex: 1,
72-
flexDirection: 'row',
73-
alignItems: 'center',
74-
backgroundColor,
75-
borderBottomLeftRadius: borderRadius,
76-
borderBottomRightRadius: borderRadius
77-
}}>
78-
{
79-
buttons.map((item, index) => {
80-
return (
81-
<TouchableOpacity activeOpacity={0.5} key={'alert-button-' + index} style={{
82-
flex: 1,
83-
height: 44,
84-
marginLeft: index == 0 ? 0 : 1,
85-
justifyContent: 'center',
86-
alignItems: 'center',
87-
backgroundColor: '#fff',
88-
borderBottomLeftRadius: index == 0 ? borderRadius : 0,
89-
borderBottomRightRadius: index == buttons.length - 1 ? borderRadius : 0
90-
}} onPress={() => {
91-
RRCTopView.remove(key);
92-
Callback && Callback(index);
93-
}} >
94-
<Text style={[{ fontSize: buttonTextFontSize }, { ...item.style }]}>{item.text}</Text>
95-
</TouchableOpacity>
96-
)
97-
})
98-
}
99-
</View>
100-
:
101-
<View style={{
102-
height: 45 * buttons.length - 1,
103-
alignItems: 'center',
104-
backgroundColor,
105-
borderBottomLeftRadius: borderRadius,
106-
borderBottomRightRadius: borderRadius
107-
}}>
108-
{
109-
buttons.map((item, index) => {
110-
return (
111-
<TouchableOpacity activeOpacity={0.5} key={'alert-button-' + index} style={{
112-
height: 44,
113-
width: width * 0.7,
114-
marginTop: index == 0 ? 0 : 1,
115-
justifyContent: 'center',
116-
alignItems: 'center',
117-
backgroundColor: '#fff',
118-
borderBottomLeftRadius: index == buttons.length - 1 ? borderRadius : 0,
119-
borderBottomRightRadius: index == buttons.length - 1 ? borderRadius : 0
120-
}} onPress={() => {
121-
RRCTopView.remove(key);
122-
Callback && Callback(index);
123-
}} >
124-
<Text style={[{ fontSize: buttonTextFontSize }, { ...item.style }]}>{item.text}</Text>
125-
</TouchableOpacity>
126-
)
127-
})
128-
}
129-
</View>
130-
}
40+
<View style={{ width, height, backgroundColor: alertBackgroundColor, justifyContent: 'center', alignItems: 'center' }}>
41+
<View style={{ width: width * 0.7, borderRadius, backgroundColor: '#fff', overflow: 'hidden' }}>
42+
{
43+
title.length > 0 ?
44+
<View style={{
45+
padding: content.length < 1 ? 20 : 10,
46+
justifyContent: 'center',
47+
alignItems: 'center',
48+
borderTopLeftRadius: borderRadius,
49+
borderTopRightRadius: borderRadius
50+
}}>
51+
<Text style={{ fontSize: titleTextFontSize, fontWeight: 'bold' }}>{title}</Text>
52+
</View>
53+
:
54+
<View style={{
55+
height: borderRadius + 5,
56+
borderTopLeftRadius: borderRadius,
57+
borderTopRightRadius: borderRadius
58+
}} />
59+
}
60+
{
61+
content.length > 0 ?
62+
<Text style={[{
63+
fontSize: contentTextFontSize,
64+
padding: 20,
65+
paddingTop: 5,
66+
textAlign: 'center',
67+
}, { ...options.contentTextStyle }]}>
68+
{content}
69+
</Text>
70+
: null
71+
}
72+
<View style={{
73+
height: 1,
74+
backgroundColor,
75+
width: width * 0.7
76+
}} />
77+
{
78+
buttons.length < 3 ?
79+
<View style={{
80+
height: 44,
81+
// flex: 1,
82+
flexDirection: 'row',
83+
alignItems: 'center',
84+
backgroundColor,
85+
borderBottomLeftRadius: borderRadius,
86+
borderBottomRightRadius: borderRadius
87+
}}>
88+
{
89+
buttons.map((item, index) => {
90+
return (
91+
<TouchableOpacity activeOpacity={0.5} key={'alert-button-' + index} style={{
92+
flex: 1,
93+
height: 44,
94+
marginLeft: index == 0 ? 0 : 1,
95+
justifyContent: 'center',
96+
alignItems: 'center',
97+
backgroundColor: '#fff',
98+
borderBottomLeftRadius: index == 0 ? borderRadius : 0,
99+
borderBottomRightRadius: index == buttons.length - 1 ? borderRadius : 0
100+
}} onPress={() => {
101+
RRCTopView.remove(key);
102+
Callback && Callback(index);
103+
}} >
104+
<Text style={[{ fontSize: buttonTextFontSize }, { ...item.style }]}>{item.text}</Text>
105+
</TouchableOpacity>
106+
)
107+
})
108+
}
109+
</View>
110+
:
111+
<View style={{
112+
height: 45 * buttons.length - 1,
113+
alignItems: 'center',
114+
backgroundColor,
115+
borderBottomLeftRadius: borderRadius,
116+
borderBottomRightRadius: borderRadius
117+
}}>
118+
{
119+
buttons.map((item, index) => {
120+
return (
121+
<TouchableOpacity activeOpacity={0.5} key={'alert-button-' + index} style={{
122+
height: 44,
123+
width: width * 0.7,
124+
marginTop: index == 0 ? 0 : 1,
125+
justifyContent: 'center',
126+
alignItems: 'center',
127+
backgroundColor: '#fff',
128+
borderBottomLeftRadius: index == buttons.length - 1 ? borderRadius : 0,
129+
borderBottomRightRadius: index == buttons.length - 1 ? borderRadius : 0
130+
}} onPress={() => {
131+
RRCTopView.remove(key);
132+
Callback && Callback(index);
133+
}} >
134+
<Text style={[{ fontSize: buttonTextFontSize }, { ...item.style }]}>{item.text}</Text>
135+
</TouchableOpacity>
136+
)
137+
})
138+
}
139+
</View>
140+
}
141+
</View>
131142
</View>
132143
)
133144
let onDisappearCompletedSave = overlayView.props.onDisappearCompleted;

‎src/RRCLoading.js‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,30 @@ import {
77
} from 'react-native';
88
import RRCTopView from './RRCTopView';
99

10-
let LoadingOptions
10+
let LoadingOptions = {}
1111

1212
export default class OverlayLoading {
1313
static setLoadingOptions(options = {}) {
14-
LoadingOptions = options;
14+
if (options.text != undefined) {
15+
LoadingOptions.text = options.text;
16+
}
17+
if (options.loadingBackgroundColor != undefined) {
18+
LoadingOptions.loadingBackgroundColor = options.loadingBackgroundColor;
19+
}
20+
if (options.loadingViewBackgroundColor != undefined) {
21+
LoadingOptions.loadingViewBackgroundColor = options.loadingViewBackgroundColor;
22+
}
23+
if (options.loadingImage != undefined) {
24+
LoadingOptions.loadingImage = options.loadingImage;
25+
}
26+
1527
}
1628
static show(textContent = (LoadingOptions && LoadingOptions.text ? LoadingOptions.text : '加载中...')) {
29+
const loadingBackgroundColor = LoadingOptions.loadingBackgroundColor ? LoadingOptions.loadingBackgroundColor : 'rgba(0,0,0,0.3)';
30+
const loadingViewBackgroundColor = LoadingOptions.loadingViewBackgroundColor ? LoadingOptions.loadingViewBackgroundColor : 'rgba(0,0,0,0)'
1731
const loadingView = (
18-
<View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0)', justifyContent: 'center', alignItems: 'center' }}>
19-
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
32+
<View style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, backgroundColor: loadingBackgroundColor, justifyContent: 'center', alignItems: 'center' }}>
33+
<View style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: loadingViewBackgroundColor, paddingTop: 10, paddingBottom: 10, paddingLeft: 10, paddingRight: 10, borderRadius: 5 }}>
2034
{
2135
LoadingOptions && LoadingOptions.loadingImage ?
2236
<Image source={LoadingOptions.loadingImage} style={{ margin: 10 }} />

‎src/RRCTopView.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ export default class RRCTopView extends Component {
247247

248248
var styles = StyleSheet.create({
249249
overlayContainer: {
250-
backgroundColor: 'rgba(0, 0, 0, 0.5)',
250+
backgroundColor: 'rgba(0, 0, 0, 0)',
251251
position: 'absolute',
252252
top: 0,
253253
left: 0,

0 commit comments

Comments
 (0)