暫無描述

PincodeScreen.js 1.5KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  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. const pin = 1234;
  6. export default class App extends React.Component {
  7. pressHandler = () => {
  8. {/*Dentro del parentesis va el path al screen para redirigir*/}
  9. this.props.navigation.navigate('test')
  10. }
  11. state = {
  12. code: '',
  13. pincode: false,
  14. };
  15. pinInput = React.createRef();
  16. _checkCode = (code) => {
  17. if (code != pin) {
  18. this.pinInput.current.shake()
  19. .then(() => this.setState({ code: '' }));
  20. } else {
  21. this.setState({ pincode: true});
  22. }
  23. }
  24. render() {
  25. const { code } = this.state;
  26. const { pincode } = this.state;
  27. return (
  28. <View style={globalStyles.container}>
  29. {/* Pin container */}
  30. <View style={globalStyles.section}>
  31. <Text style={globalStyles.titleText}>Entra el Pin de la mocion</Text>
  32. <SmoothPinCodeInput
  33. ref={this.pinInput}
  34. value={code}
  35. onTextChange={code => this.setState({ code })}
  36. onFulfill={this._checkCode}
  37. onBackspace={() => console.log('No more back.')}
  38. />
  39. </View>
  40. { pincode && <Button title='Ir a mocion' onPress={this.pressHandler} />}
  41. </View>
  42. );
  43. }
  44. }