@@ -19,20 +19,75 @@ const instructions = Platform.select({
19
19
20
20
type Props = { } ;
21
21
export default class App extends Component < Props > {
22
+
23
+ grad ( text , key ) {
24
+ return (
25
+ < LinearTextGradient
26
+ style = {
27
+ [ styles . welcome , {
28
+ backgroundColor : 'red' ,
29
+ textDecorationLine : 'underline' ,
30
+ } ]
31
+ }
32
+ key = { key }
33
+ locations = { [ 0 , 1 ] }
34
+ colors = { [ 'green' , 'red' ] }
35
+ start = { { x : 0 , y : 0 } }
36
+ end = { { x : 1 , y : 0 } }
37
+ >
38
+ { text }
39
+ </ LinearTextGradient >
40
+ )
41
+ }
22
42
render ( ) {
23
43
return (
24
44
< View style = { styles . container } >
25
45
< LinearTextGradient
26
- style = { styles . welcome }
46
+ style = {
47
+ [ styles . welcome , {
48
+ backgroundColor : 'lightgray'
49
+ } ]
50
+ }
27
51
locations = { [ 0 , 1 ] }
28
- colors = { [ 'blue ' , 'red ' ] }
29
- start = { { x : 0 , y : 0 } }
30
- end = { { x : 1 , y : 0 } }
52
+ colors = { [ 'lime ' , 'purple ' ] }
53
+ start = { { x : 1 , y : 0 } }
54
+ end = { { x : 0 , y : 0 } }
31
55
>
32
- Welcome to React Native!
56
+ { /* _████████████_ */ }
57
+ { this . grad ( '.█ ██ ███ █ ███ ' , 1 ) }
58
+ { this . grad ( '.█ ' , 2 ) }
59
+ { this . grad ( '2█ ' ) }
60
+ { this . grad ( '3█ ' ) }
61
+ { this . grad ( '.██ ' ) }
62
+ { this . grad ( '.███ ' ) }
63
+ { this . grad ( '.█ █ ' ) }
64
+ { this . grad ( '.█ █ █ ' ) }
65
+ { this . grad ( '.█ ██ ██ ' , 'yellow' ) }
66
+ { this . grad ( '.█ ' ) }
67
+ { this . grad ( '?██ ' ) }
68
+ { this . grad ( '.███ ' ) }
69
+ { this . grad ( '.█ █ ' ) }
70
+ { this . grad ( '.█ █ █ ' ) }
71
+ { this . grad ( '.█ ██ ██ ' ) }
72
+ { this . grad ( '.█' ) }
73
+ { this . grad ( '.██ ' ) }
74
+ { this . grad ( '.█████████ ' ) }
75
+ { this . grad ( '.█ █ ' ) }
76
+ { this . grad ( '.█ █ █ ' ) }
77
+ { this . grad ( '.█ ██ █ ' ) }
78
+ { this . grad ( '.█ ' ) }
79
+ { this . grad ( '.██ ' ) }
80
+ { this . grad ( '.███ ' ) }
81
+ { this . grad ( '.█ █ ' ) }
82
+ { this . grad ( '.█ █ █ ' ) }
33
83
</ LinearTextGradient >
34
- < Text style = { styles . instructions } > To get started, edit App.js</ Text >
35
- < Text style = { styles . instructions } > { instructions } </ Text >
84
+ < Text style = { styles . instructions } >
85
+ To get started, edit App.js
86
+ < Text style = { [ styles . instructions , {
87
+ textDecorationLine : 'underline' ,
88
+ fontWeight : 'bold'
89
+ } ] } > { instructions } </ Text >
90
+ </ Text >
36
91
</ View >
37
92
) ;
38
93
}
@@ -46,13 +101,14 @@ const styles = StyleSheet.create({
46
101
backgroundColor : '#F5FCFF' ,
47
102
} ,
48
103
welcome : {
49
- fontSize : 20 ,
104
+ fontSize : 30 ,
50
105
textAlign : 'center' ,
51
106
margin : 10 ,
107
+ color : 'white'
52
108
} ,
53
109
instructions : {
54
110
textAlign : 'center' ,
55
111
color : '#333333' ,
56
- marginBottom : 5 ,
112
+ marginBottom : 5
57
113
} ,
58
114
} ) ;
0 commit comments