Question

我是React Native开发的新手。我想创建一个输入密码验证页面。我不知道如何创建这个页面。

请给我一些样品

提前谢天谢地。

Answer 1

这是 passCode 的方式：

根据您的项目使用图像和路径

import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity, Image } from 'react-native'; 

import H1 from '../../Common/Inheritance/h1';
import {config} from '../../../theme/config';

import { Actions } from "react-native-router-flux";

class EnterPassCode extends Component {
    constructor(props) {
        super(props);
        this.state = {
            passCode: ''
        }
        this.onBack=this.onBack.bind(this);
    }
    onBack() {
        Actions.EnterTouchId();
    }
    onChangePassCode(){

    }
    render() {
        return (<View style={styles.pad} >
            <TouchableOpacity
                style={styles.backButton}
                onPress={this.onBack}>
                <Image
                source={require('../../../assets/img/back_arrow_black.png')}
            />
            </TouchableOpacity>
            <View style={ styles.title}>
                <H1>Create a passcode</H1>
            </View>
            <View style={styles.codeWrapper}>
                <View style={styles.passcodeEnter}>
                    <TextInput 
                        secureTextEntry={true}
                        style={styles.textBox}
                        keyboardType = 'numeric'
                        maxLength = {4}
                        autoFocus={true}
                        onChange={this.onChangePassCode.bind(this)}
                        onChangeText={(passCode) => this.setState({passCode})}
                    />  
                </View> 
                <View style={styles.circleBlock}>
                    <View style={[styles.circle, this.state.passCode.length>=1 && styles.circleFill]}></View>
                    <View style={[styles.circle, this.state.passCode.length>=2 && styles.circleFill]}></View>
                    <View style={[styles.circle, this.state.passCode.length>=3 && styles.circleFill]}></View>
                    <View style={[styles.circle, this.state.passCode.length>=4 && styles.circleFill]}></View>    
                </View>     
            </View>      
        </View>);
    }
}

const styles = StyleSheet.create({
    pad: {
        paddingTop:75,
        margin:5,
    },
    backButton: {
        display:'flex',
        left:10,
        top:30,
        position:'absolute',
        zIndex:9999,
        width:50,
        height:50,
        alignItems:'center',
        justifyContent: 'center',
    },
    title: {
        flex:1,
        alignItems:'center',
        justifyContent:'center',
        paddingBottom:90,
        paddingTop:40
    },
    codeWrapper: {
        position:'relative'
    },
    passcodeEnter: {        
        height:'100%',
        opacity:0,
        position:'absolute',
        width:'100%',
        zIndex:9
    },
    textBox: {
        fontSize:30,
        letterSpacing:15,
        textAlign:'center',
    },
    circleBlock: {
        display:'flex',
        flexDirection:'row',
        justifyContent:'center'
    },
    circle: {
        borderRadius:30,
        borderWidth:3,  
        borderColor:config.primaryColor,
        height:25,
        marginLeft:23,
        marginRight:23,
        width:25       
   },
   circleFill: {
        backgroundColor:config.primaryColor,
        borderRadius:30,
        borderWidth:3,  
        borderColor:config.primaryColor,
        height:25,
        marginLeft:23,
        marginRight:23,
        width:25       
   }
});

export default EnterPassCode;

如何在反应原生中创建输入密码认证？

1 个答案: