React Native开发PIN码数字锁屏时出现_presControl未定义报错如何解决

• 核心问题是你混用了React类组件和函数式组件的语法：你定义的Buttons是函数式组件，函数组件不存在this实例，你用this.state、this.setState、this._presControl这类类组件专属写法自然会找不到对应属性。
• 其次onPress的绑定逻辑错误：你直接写onPress={this._presControl(num.id)}会让函数在组件渲染阶段就直接执行，而非点击时触发，即使解决了this问题也不符合需求。

把代码改成标准的函数式组件写法，用React提供的useState Hook管理PIN码状态即可，修复后的完整代码如下：

import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

const Buttons = () => {
    // 用useState管理passcode状态
    const [passcode, setPasscode] = useState(['','','','']);

    // 定义按键处理函数，不需要加this
    const pressControl = (num) => {
        // 不要直接修改原状态，先拷贝一份新数组，符合React不可变数据原则
        const tempCode = [...passcode];
        for(let i = 0; i < tempCode.length; i++){
            if(tempCode[i] === ''){
                tempCode[i] = num;
                break;
            }
        }
        setPasscode(tempCode);
    };

    const nopad = [
        {id:1}, {id:2}, {id:3},
        {id:4}, {id:5}, {id:6},
        {id:7}, {id:8}, {id:9},
        {id:0}
    ]; 
    return(
        <View>
            <View style={styles.boxcontaner}>
                {passcode.map((p, index) =>{
                    const style = p !== '' ? styles.box2 : styles.box1;
                    return <View key={index} style={style}></View>
                })}       
            </View>
            <View style={styles.noBox}>
                {nopad.map(num =>{
                    return(
                        <TouchableOpacity 
                            style={styles.box}
                            key={num.id}
                            // 用箭头函数包裹，点击时才执行对应逻辑
                            onPress={() => pressControl(num.id)} 
                        >
                            <Text style={styles.title}>{num.id}</Text>
                        </TouchableOpacity>
                    );
                })}             
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    box1: {
        width:13,
        height:13,
        borderRadius:13,
        borderWidth:1,
        borderColor:'gray'
    },
    box2: {
        width:13,
        height:13,
        borderRadius:13,
        borderWidth:1,
        borderColor:'gray',
        backgroundColor:'red'
    },
    box: {
        width:70,
        height:70,
        borderRadius:70,
        borderWidth:1,
        borderColor:'#F2F3F4',
        backgroundColor:'#F2F3F4',
        justifyContent:'center',
        alignItems:'center'
    },
    boxcontaner:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
        marginLeft:40,
        marginRight:40,
        marginTop:10,
    },
    noBox:{
        alignItems:'center',
        justifyContent:'center',
        marginTop:100,
        flexDirection:'row',
        flexWrap:'wrap',
        marginLeft:20,
        width:270,
        height:200,
    },
    title: {
        fontSize: 24,
        // 补充原代码缺失的文字样式，避免显示异常
    }
});

export default Buttons;

• 删除了未使用的导入依赖，避免冗余警告
• 给PIN码的占位View添加了key属性，消除React列表渲染警告

内容的提问来源于stack exchange，提问作者Code With Banchi