-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.ios.js
488 lines (464 loc) · 20 KB
/
index.ios.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView
} from 'react-native'
import Svg, {
Line,
Polygon
} from 'react-native-svg'
import {
STROKE_WIDTH,
STROKE_COLOR,
DEFAULT_COLOR,
DISABLED_COLOR,
CHOSEN_COLOR
} from './app/constants'
const POLY_1 = ({stroke = STROKE_COLOR, fill = 'none', strokeWidth = STROKE_WIDTH, points = '0.0'}) => (
<Polygon
points={points}
fill={fill}
stroke={STROKE_COLOR}
strokeWidth={strokeWidth}
/>
)
const setActivePolys = (num = 0) => {
let result = {}
const till = 9
for (let i = 0; i <= till; i++) {
result[`fill00${i}`] = i <= num ? CHOSEN_COLOR : DEFAULT_COLOR
}
return result
}
const Axis = ({startPoint=['0,0', '0,0'], endPoint=['0,0', '0,0']}) => (<Line
x1={startPoint[0]}
y1={startPoint[1]}
x2={endPoint[0]}
y2={endPoint[1]}
stroke={STROKE_COLOR}
strokeWidth={STROKE_WIDTH}
/>)
export default class xyz extends Component {
constructor() {
super()
this.state = Object.assign({hover: true}, setActivePolys())
}
toggle = () => {
this.setState({hover: !this.state.hover});
}
renderAxis() {
const axisArray = [
[
['145','112.254'],
['145','251.14736709749']
]
]
return axisArray.map((coords) => <Axis startPoint={coords[0]} endPoint={coords[1]}/>)
}
render() {
const SVG_HEIGHT = 251.14736709749
const SVG_WIDTH = 290
return (
<View style={styles.container}>
<ScrollView>
<Text style={styles.display}>3,1415926535 8979323846 2643383279 5028841971 6939937510 5820974944
5923078164 0628620899 8628034825 3421170679 8214808651 3282306647 0938446095 5058223172
5359408128 4811174502 8410270193 8521105559 6446229489 5493038196 4428810975 6659334461
2847564823 3786783165 2712019091 4564856692 3460348610 4543266482 1339360726 0249141273
7245870066 0631558817 4881520920 9628292540 9171536436 7892590360 0113305305 4882046652
1384146951 9415116094 3305727036 5759591953 0921861173 8193261179 3105118548 0744623799
6274956735 1885752724 8912279381 8301194912 9833673362 4406566430 8602139494 6395224737
1907021798 6094370277 0539217176 2931767523 8467481846 7669405132 0005681271 4526356082
7785771342 7577896091 7363717872 1468440901 2249534301 4654958537 1050792279 6892589235
4201995611 2129021960 8640344181 5981362977 4771309960 5187072113 4999999837 2978049951
0597317328 1609631859 5024459455 3469083026 4252230825 3344685035 2619311881 7101000313
7838752886 5875332083 8142061717 7669147303 5982534904 2875546873 1159562863 8823537875
9375195778 1857780532 1712268066 1300192787 6611195909 2164201989</Text>
</ScrollView>
<View>
<Svg
height={SVG_HEIGHT}
width={SVG_WIDTH}
>
{/* Земля */}
<POLY_1 points='0,0 290,0 145,251.14736709749'/>
{/* Луна */}
<POLY_1 points='41.156,24.126 145,203.094 247.899,24.126'/>
{/* Солнце */}
<POLY_1 points='80.45,46.691 145,157.629 208.332,46.691'/>
{/* 999 */}
<POLY_1 points='120.037,69.052 169.485,69.052 145,112.254'/>
{/* Polus1 */}
{this.renderAxis()}
{/* Polus2 */}
<Line
x1='96,269'
y1='167,184'
x2='136,491'
y2='97,66'
stroke={STROKE_COLOR}
strokeWidth={STROKE_WIDTH}
/>
{/* Polus3 */}
<Line
x1='47,78'
y1='83,145'
x2='128,077'
y2='83,145'
stroke={STROKE_COLOR}
strokeWidth={STROKE_WIDTH}
/>
{/* Polus4 */}
<Line
x1='0'
y1='0'
x2='120.037'
y2='69.052'
stroke={STROKE_COLOR}
strokeWidth={STROKE_WIDTH}
/>
{/* Polus5 */}
<Line
x1='96,66'
y1='0'
x2='136,425'
y2='69,048'
stroke={STROKE_COLOR}
strokeWidth={STROKE_WIDTH}
/>
{/* Polus6 */}
<Line
x1='192,745'
y1='0'
x2='153,103'
y2='69,048'
stroke={STROKE_COLOR}
strokeWidth={STROKE_WIDTH}
/>
{/* Polus7 */}
<Line
x1='290'
y1='0'
x2='169.485'
y2='69.052'
stroke={STROKE_COLOR}
strokeWidth={STROKE_WIDTH}
/>
{/* Polus8 */}
<Line
x1='241,601'
y1='83,145'
x2='161,464'
y2='83,145'
stroke={STROKE_COLOR}
strokeWidth={STROKE_WIDTH}
/>
{/* Polus9 */}
<Line
x1='153,231'
y1='97,544'
x2='193,9'
y2='167,184'
stroke={STROKE_COLOR}
strokeWidth={STROKE_WIDTH}
/>
{/* Polygon001 */}
<Polygon
ref='001'
points='98.263,166.687 110.259,145.525 143.576,203.555 143.576,246.029'
stroke={this.state.hover ? DISABLED_COLOR : CHOSEN_COLOR}
fill={this.state.fill001}
strokeWidth='2'
delayPressIn={0}
onPressIn={this.toggle}
onPressOut={this.toggle}
onPress={() => {
this.setState(setActivePolys(1))
}}
/>
{/* Polygon002 */}
<Polygon
ref='002'
points='50.353,84.595 74.916,84.595 108.758,143.311 96.437,164.365'
stroke={this.state.hover ? DISABLED_COLOR : CHOSEN_COLOR}
fill={this.state.fill002}
strokeWidth='2'
delayPressIn={0}
onPressIn={this.toggle}
onPressOut={this.toggle}
onPress={() => {
this.setState(setActivePolys(2))
}}
/>
{/* Polygon003 */}
<Polygon
ref='003'
points='4.617,4.683 40.044,24.54 73.256,81.979 49.307,81.979'
stroke={this.state.hover ? DISABLED_COLOR : CHOSEN_COLOR}
fill={this.state.fill003}
strokeWidth='2'
delayPressIn={0}
onPressIn={this.toggle}
onPressOut={this.toggle}
onPress={() => {
this.setState(setActivePolys(3))
}}
/>
{/* Polygon004 */}
<Polygon
ref='004'
points='5.87,1.979 95.976,1.979 108.287,23.296 42.077,23.296'
stroke={this.state.hover ? DISABLED_COLOR : CHOSEN_COLOR}
fill={this.state.fill004}
strokeWidth='2'
delayPressIn={0}
onPressIn={this.toggle}
onPressOut={this.toggle}
onPress={() => {
this.setState(setActivePolys(4))
}}
/>
{/* Polygon005 */}
<Polygon
ref='005'
points='98.622,1.979 190.289,1.979 177.887,23.296 111.122,23.296'
fill={this.state.fill}
stroke={this.state.hover ? DISABLED_COLOR : CHOSEN_COLOR}
fill={this.state.fill005}
strokeWidth='2'
delayPressIn={0}
onPressIn={this.toggle}
onPressOut={this.toggle}
onPress={() => {
this.setState(setActivePolys(5))
}}
/>
{/* Polygon006 */}
<Polygon
ref='006'
points='193.086,1.979 284.748,1.979 246.991,23.296 180.673,23.296'
stroke={this.state.hover ? DISABLED_COLOR : CHOSEN_COLOR}
fill={this.state.fill006}
strokeWidth='2'
delayPressIn={0}
onPressIn={this.toggle}
onPressOut={this.toggle}
onPress={() => {
this.setState(setActivePolys(6))
}}
/>
{/* Polygon007 */}
<Polygon
ref='007'
points='249.29,24.813 285.84,3.952 240.727,82.051 215.901,82.051'
stroke={this.state.hover ? DISABLED_COLOR : CHOSEN_COLOR}
fill={this.state.fill007}
strokeWidth='2'
delayPressIn={0}
onPressIn={this.toggle}
onPressOut={this.toggle}
onPress={() => {
this.setState(setActivePolys(7))
}}
/>
{/* Polygon008 */}
<Polygon
ref='008'
points='214.809,84.522 238.888,84.522 192.683,164.92 180.328,143.657'
stroke={this.state.hover ? DISABLED_COLOR : CHOSEN_COLOR}
fill={this.state.fill008}
strokeWidth='2'
delayPressIn={0}
onPressIn={this.toggle}
onPressOut={this.toggle}
onPress={() => {
this.setState(setActivePolys(8))
}}
/>
{/* Polygon009 */}
<Polygon
ref='009'
points='145.732,203.424 179.063,146.128 191.189,167.219 145.962,245.893'
stroke={this.state.hover ? DISABLED_COLOR : CHOSEN_COLOR}
fill={this.state.fill009}
strokeWidth='2'
delayPressIn={0}
onPressIn={this.toggle}
onPressOut={this.toggle}
onPress={() => {
this.setState(setActivePolys(9))
}}
/>
{/* Polygon010 */}
<Polygon
ref='010'
points='111.62,143.495 123.293,123.115 143.576,158.229 143.576,198.797'
fill={this.state.fill}
/>
{/* Polygon020 */}
<Polygon
ref='020'
points='77.632,84.595 101.129,84.595 121.864,120.534 110.162,140.895'
fill={this.state.fill}
/>
{/* Polygon030 */}
<Polygon
ref='020'
points='44.149,26.805 79.411,47.172 100,81.979 76,81.979'
fill={this.state.fill}
/>
{/* Polygon040 */}
<Polygon
ref='040'
points='45.705,25.563 109.707,25.563 121.386,45.705 81.554,45.705'
fill={this.state.fill}
/>
{/* Polygon050 */}
<Polygon
ref='050'
points='112.472,25.563 176.564,25.563 165,45.705 124.038,45.705'
fill={this.state.fill}
/>
{/* Polygon060 */}
<Polygon
ref='060'
points='179.216,25.563 242.969,25.563 208.271,45.705 167.706,45.705'
fill={this.state.fill}
/>
{/* Polygon070 */}
<Polygon
ref='070'
points='209.528,47.603 245.147,27.129 213.436,82.113 189.542,82.112'
fill={this.state.fill}
/>
{/* Polygon080 */}
<Polygon
ref='080'
points='188.232,84.522 211.886,84.522 179.135,141.511 167.276,120.744'
fill={this.state.fill}
/>
{/* Polygon090 */}
<Polygon
ref='090'
points='145.732,158.229 165.833,123.316 177.691,143.896 145.732,198.797'
fill={this.state.fill}
/>
{/* Polygon100 */}
<Polygon
ref='100'
points='124.738,120.556 136.47,99.663 143.56,112.211 143.686,152.93'
fill={this.state.fill}
/>
{/* Polygon200 */}
<Polygon
ref='200'
points='103.845,84.595 127.059,84.595 135.027,97.655 123.232,117.983'
fill={this.state.fill}
/>
{/* Polygon300 */}
<Polygon
ref='300'
points='83.454,49.453 118.526,69.515 125.992,81.979 102.276,81.979'
fill={this.state.fill}
/>
{/* Polygon400 */}
<Polygon
ref='400'
points='86,47.969 122.50,47.969 134.212,67.916 120.22,67.916'
fill={this.state.fill}
/>
{/* Polygon500 */}
<Polygon
ref='500'
points='125,47.969 164,47.969 152.281,67.916 137.035,67.916'
fill={this.state.fill}
/>
{/* Polygon600 */}
<Polygon
ref='600'
points='166.461,47.969 203.729,47.969 169.221,67.916 154.854,67.916'
fill={this.state.fill}
/>
{/* Polygon700 */}
<Polygon
ref='700'
points='170.79,69.798 205.486,49.783 186.914,82.112 163.512,82.112'
fill={this.state.fill}
/>
{/* Polygon800 */}
<Polygon
ref='800'
points='162.257,84.522 185.346,84.522 166.084,118.172 154.414,97.781'
fill={this.state.fill}
/>
{/* Polygon900 */}
<Polygon
ref='900'
points='145.732,112.211 153.097,100.353 164.767,120.556 145.732,152.993'
fill={this.state.fill}
/>
{/* Polygon0 */}
<Polygon
ref='0'
points='122.04,69.969 168,69.969 144.988,108.743'
stroke={this.state.hover ? DISABLED_COLOR : CHOSEN_COLOR}
fill={this.state.fill000}
strokeWidth='2'
delayPressIn={0}
onPressIn={this.toggle}
onPressOut={this.toggle}
onPress={() => {
this.setState({
fill001: DEFAULT_COLOR,
fill002: DEFAULT_COLOR,
fill003: DEFAULT_COLOR,
fill004: DEFAULT_COLOR,
fill005: DEFAULT_COLOR,
fill006: DEFAULT_COLOR,
fill007: DEFAULT_COLOR,
fill008: DEFAULT_COLOR,
fill009: DEFAULT_COLOR,
fill000: CHOSEN_COLOR
})
}}
/>
</Svg>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000000'
},
header: {
flex: 1,
backgroundColor: CHOSEN_COLOR
},
textheader: {
fontFamily: 'Gill Sans'
},
display: {
fontSize: 15,
textAlign: 'center',
color: '#F5FCFF',
margin: 10
},
button: {
height: 60,
width: 60
}
})
AppRegistry.registerComponent('xyz', () => xyz);