#javascript #reactjs #react-native #react-redux #react-hooks
Вопрос:
Я создал этот код, но он не работает, я создал четыре поля ввода для pin-кода, когда пользователи нажимают цифру, она должна переместиться в поле ввода и включить эти поля в маске, как в части*, поэтому я пытаюсь добавить это, но мне чего-то не хватает, и я не получаю четырехзначный pin-код при запуске функции, пожалуйста, помогите мне.
import React, { Component, useLayoutEffect, useState } from "react"; import { StyleSheet, Text, View, ImageBackground, SafeAreaView, Image, TouchableOpacity, TouchableOpacityBase, TextInput, } from "react-native"; import Theme from "../../utils/Theme"; import OTPInputView from "@twotalltotems/react-native-otp-input"; const hRem = AppStore.screenHeight / 812; const wRem = AppStore.screenWidth / 375; class PinAuthentication extends Component { constructor(props) { super(props); this.state = { passcode: ["", "", "", ""], }; } onPressNumber = (num) =gt; { const tempcode = this.state.passcode; for (let i = 0; i lt; tempcode.length; i ) { if (tempcode[i] == "") { tempcode[i] = num; break; } else { continue; } } this.setState({ passcode: tempcode }); }; onPressCancel = (num) =gt; { const tempcode = this.state.passcode; for (let i = tempcode.length; i gt;= 0; i--) { if (tempcode[i] != "") { tempcode[i] = ""; break; } else { continue; } } this.setState({ passcode: tempcode }); }; render() { let numbers = [ { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }, { id: 8 }, { id: 9 }, { id: 10, }, { id: 0 }, { id: 11, }, ]; return ( lt;gt; lt;ImageBackground style={styles.container} source={require("../../assets/Images/SliderImages/Background02sc.png")} /gt; lt;View style={styles.headerStyle}gt; lt;TouchableOpacitygt; lt;Image style={styles.backButton} source={require("../../assets/Images/SliderImages/Icon/BackButton.png")} /gt; lt;/TouchableOpacitygt; lt;Viewgt; lt;Text style={styles.pinText}gt;Set new PINlt;/Textgt; lt;/Viewgt; lt;/Viewgt; lt;Viewgt;lt;/Viewgt; lt;Viewgt;lt;/Viewgt; lt;Viewgt; lt;Text style={styles.pinConfirmationText}gt;Enter new PINlt;/Textgt; lt;/Viewgt; {/* lt;View style={{ alignItems: "center" }}gt; lt;OTPInputView style={{ width: "80%", height: 200 }} pinCount={4} // code={this.state.code} //You can supply this prop or not. The component will be used as a controlled / uncontrolled component respectively. // onCodeChanged = {code =gt; { this.setState({code})}} autoFocusOnLoad codeInputFieldStyle={styles.underlineStyleBase} codeInputHighlightStyle={styles.underlineStyleHighLighted} onCodeFilled={(code) =gt; { console.log(`Code is ${code}, you are good to go!`); }} secureTextEntry={true} // keyboardType={false} /gt; lt;/Viewgt; */} lt;View style={styles.codeContainer}gt; {this.state.passcode.map((x) =gt; { let codes = x != "" ? styles.inputBox1 : styles.inputBox; return ( lt;View style={codes}gt;{/* lt;Text style={codes}gt;lt;/Textgt; */}lt;/Viewgt; ); })} lt;/Viewgt; lt;View style={{ alignItems: "center", justifyContent: "center" }}gt; lt;View style={styles.numberContainer}gt; {numbers.map((num, numb) =gt; { return ( lt;gt; {num.id == 10 ? ( lt;TouchableOpacity key={num.id} onPress={() =gt; this.onPressCancel()} style={styles.number} gt; lt;Image style={styles.img} source={require("../../assets/Images/SliderImages/Icon/icons_cancel_last_digit.png")} /gt; lt;/TouchableOpacitygt; ) : num.id == 11 ? ( lt;TouchableOpacity key={num.id} onPress={() =gt; this.onPressCancel()} style={styles.number} gt; lt;Image style={styles.img} source={require("../../assets/Images/SliderImages/Icon/icons_check.png")} /gt; lt;/TouchableOpacitygt; ) : ( lt;TouchableOpacity key={num.id} onPress={() =gt; this.onPressNumber(num.id)} style={styles.number} gt; lt;Text style={styles.numberText}gt;{num.id}lt;/Textgt; lt;/TouchableOpacitygt; )} lt;/gt; ); })} lt;/Viewgt; lt;/Viewgt; lt;/gt; ); } } export default PinAuthentication; const styles = StyleSheet.create({ container: { flex: 1, position: "absolute", top: 0, right: 0, left: 0, bottom: 0, backgroundColor: "#021831", }, headerStyle: { flexDirection: "row", marginTop: hRem * 56, marginHorizontal: wRem * 24, alignItems: "center", }, backButton: { width: wRem * 12, height: hRem * 21, }, pinText: { color: "white", textAlign: "center", alignSelf: "center", marginLeft: wRem * 101, fontSize: hRem * 18, ...Theme.encodeSansMed1, lineHeight: hRem * 16, }, pinConfirmationText: { textAlign: "center", marginTop: hRem * 44, color: "white", ...Theme.encodeSansMed3, lineHeight: hRem * 19.07, }, borderStyleBase: { width: 30, height: 45, }, borderStyleHighLighted: { borderColor: "#707070", }, underlineStyleBase: { width: wRem * 62, height: 45, borderWidth: 0, borderBottomWidth: 1, }, underlineStyleHighLighted: { borderColor: "#FFFFFF", }, number: { width: wRem * 77, height: hRem * 77, borderRadius: wRem * 77, backgroundColor: "#000000", justifyContent: "center", alignItems: "center", marginHorizontal: wRem * 12, marginVertical: hRem * 9, }, numberContainer: { flexDirection: "row", flexWrap: "wrap", marginTop: hRem * 95, alignItems: "center", justifyContent: "center", shadowColor: Theme.shadow_Button, shadowOffset: { width: 1, height: 1, }, shadowOpacity: 1.5, shadowRadius: 5, elevation: 3, }, numberText: { ...Theme.encodeSansMed4, // lineHeight: hRem * 16, position: "absolute", textAlign: "center", color: Theme.white_color, }, codeContainer: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginHorizontal: wRem * 49, marginTop: hRem * 50, }, code: { width: wRem * 62, height: hRem * 2, borderColor: "#FFFFFF", borderWidth: 1, borderRadius: 13, }, inputBox: { width: wRem * 62, borderBottomWidth: 1, borderWidth: 1, // height: 13, // width: 13, borderColor: "#FFFFFF", // alignItems: "center", // justifyContent: "space-between", // backgroundColor: "white", // borderRadius: 13, }, inputBox1: { width: wRem * 62, borderBottomWidth: 1, borderWidth: 1, // height: 13, // width: 13, borderColor: "#FFFFFF", // alignItems: "center", // justifyContent: "space-between", // backgroundColor: "white", // borderRadius: 13, }, inputText: { color: "white", ...Theme.encodeSansMed3, paddingBottom: hRem * 21, backgroundColor: "green", width: 20, }, inputText1: { color: "white", ...Theme.encodeSansMed3, paddingBottom: hRem * 21, }, img: { width: wRem * 30, height: hRem * 22, }, }); Я создал этот код, но он не работает, я создал четыре поля ввода для pin-кода, когда пользователи нажимают цифру, она должна переместиться в поле ввода и включить эти поля в маске, как в части*, поэтому я пытаюсь добавить это, но что-то мне не хватает, и я не получаю четырехзначный pin-код при запуске функции.