Przeglądaj źródła

added pincodescreen and testscreen

Ricardo-gonzalez32 2 lat temu
rodzic
commit
2fd42f89e3

+ 55
- 0
MocionesIUPI/screens/PincodeScreen.js Wyświetl plik

@@ -0,0 +1,55 @@
1
+import React from "react";
2
+import { StyleSheet, View, Text, Button } from 'react-native';
3
+import { globalStyles } from "../styles/global";
4
+import SmoothPinCodeInput from 'react-native-smooth-pincode-input';
5
+
6
+const pin = 1234;
7
+
8
+export default class App extends React.Component {
9
+    
10
+    pressHandler = () => {
11
+    {/*Dentro del parentesis va el path al screen para redirigir*/}
12
+      this.props.navigation.navigate('test')
13
+    }
14
+
15
+    state = {
16
+      code: '',
17
+      pincode: false,
18
+    };
19
+    pinInput = React.createRef();
20
+  
21
+    _checkCode = (code) => {
22
+      if (code != pin) {
23
+        this.pinInput.current.shake()
24
+          .then(() => this.setState({ code: '' }));
25
+      } else {
26
+        this.setState({ pincode: true});
27
+      }
28
+    }
29
+  
30
+    render() {
31
+      const { code } = this.state;
32
+      const { pincode } = this.state;
33
+      return (
34
+        <View style={globalStyles.container}>
35
+          {/* Pin container */}
36
+          <View style={globalStyles.section}>
37
+            <Text style={globalStyles.titleText}>Entra el Pin de la mocion</Text>
38
+            <SmoothPinCodeInput
39
+              ref={this.pinInput}
40
+              value={code}
41
+              onTextChange={code => this.setState({ code })}
42
+              onFulfill={this._checkCode}
43
+              onBackspace={() => console.log('No more back.')}
44
+              />
45
+          </View>
46
+          
47
+          { pincode && <Button title='Ir a mocion' onPress={this.pressHandler} />}
48
+          
49
+        </View>
50
+      );
51
+    }
52
+  }
53
+
54
+
55
+  

+ 11
- 0
MocionesIUPI/screens/testscreen.js Wyświetl plik

@@ -0,0 +1,11 @@
1
+import React from "react";
2
+import { StyleSheet, View, Text, Button } from 'react-native';
3
+import { globalStyles } from "../styles/global";
4
+
5
+export default function testscreen() {
6
+    return (
7
+        <View style = {globalStyles.container}>
8
+            <Text style = {globalStyles.tittleText}>This is a test for pin button</Text>
9
+        </View>
10
+    )
11
+}