React Native中TouchableOpacity禁用异常问题求助

我开发了一款条码扫描应用，要求用户必须先在登录模块扫描条码获取数据，才能进入“Start Job”模块。原本计划用TouchableOpacity的disabled属性实现未扫码时禁用该按钮，首页通过route.params && route.params.variableNames展示用户扫描的数据，但现在“START JOB”按钮始终处于禁用状态，以下是我的代码：

export default function Home ({route}){
    const navigation = useNavigation()
    const [status,setstatus]=useState(true)
    useEffect(()=>{
        {route.params && route.params.userid !==''? setstatus(false):setstatus(true)}
    },[]);
    return(
        <View style={styles.container1}>
            <Text style={styles.design1} >UserID</Text>        
            <TextInput
            style={styles.design}
            placeholder={route.params && route.params.userid}
            editable={false}
            />        
            <TouchableOpacity  onPress={()=> navigation.navigate('Scanlogin')} style={styles.design2} >
                <Text style={{color:'darkslateblue',fontSize:20,fontWeight:'bold',textAlign:'center'}}>LOGIN</Text>
            </TouchableOpacity> 
            <Text style={styles.design6}>SCAN YOUR BADGE BEFORE YOU PROCEED TO START JOB</Text>
            <TouchableOpacity disabled={status} onPress={()=> navigation.navigate('Start',{userid:route.params && route.params.userid})} style={styles.design4}>
                <Text style={{color:'darkslateblue',fontSize:20,fontWeight:'bold',textAlign:'center'}}>START JOB</Text>
            <StatusBar style="auto"/>
        </View>
    );
}

问题原因 #

核心问题在于useEffect的依赖数组为空，仅在组件首次渲染时执行一次。当用户从Scanlogin页面扫码完成返回Home页面时，route.params已经更新，但useEffect不会重新触发，导致status状态始终保持初始的true，按钮一直处于禁用状态。另外原代码中START JOB的TouchableOpacity标签未闭合，属于语法问题。

修复方案 #

方案1：更新useEffect依赖数组 #

将route.params加入useEffect的依赖数组，确保参数变化时重新更新状态：

export default function Home ({route}){
    const navigation = useNavigation()
    const [status, setStatus] = useState(true)
    
    useEffect(()=>{
        // 判断是否存在有效userid，更新按钮状态
        setStatus(!(route.params && route.params.userid !== ''))
    }, [route.params]); // 添加route.params作为依赖，参数变化时重新执行

    return(
        <View style={styles.container1}>
            <Text style={styles.design1} >UserID</Text>        
            <TextInput
                style={styles.design}
                placeholder={route.params?.userid || ''}
                editable={false}
            />        
            <TouchableOpacity onPress={()=> navigation.navigate('Scanlogin')} style={styles.design2} >
                <Text style={{color:'darkslateblue',fontSize:20,fontWeight:'bold',textAlign:'center'}}>LOGIN</Text>
            </TouchableOpacity> 
            <Text style={styles.design6}>SCAN YOUR BADGE BEFORE YOU PROCEED TO START JOB</Text>
            <TouchableOpacity 
                disabled={status} 
                onPress={()=> navigation.navigate('Start',{userid: route.params?.userid})} 
                style={styles.design4}
            >
                <Text style={{color:'darkslateblue',fontSize:20,fontWeight:'bold',textAlign:'center'}}>START JOB</Text>
            </TouchableOpacity>
            <StatusBar style="auto"/>
        </View>
    );
}

方案2：直接在disabled中判断（简化代码） #

可以省去额外的status状态，直接通过route.params判断按钮是否禁用：

export default function Home ({route}){
    const navigation = useNavigation()

    // 直接判断是否满足启用条件
    const isStartJobDisabled = !(route.params && route.params.userid !== '')

    return(
        <View style={styles.container1}>
            <Text style={styles.design1} >UserID</Text>        
            <TextInput
                style={styles.design}
                placeholder={route.params?.userid || ''}
                editable={false}
            />        
            <TouchableOpacity onPress={()=> navigation.navigate('Scanlogin')} style={styles.design2} >
                <Text style={{color:'darkslateblue',fontSize:20,fontWeight:'bold',textAlign:'center'}}>LOGIN</Text>
            </TouchableOpacity> 
            <Text style={styles.design6}>SCAN YOUR BADGE BEFORE YOU PROCEED TO START JOB</Text>
            <TouchableOpacity 
                disabled={isStartJobDisabled} 
                onPress={()=> navigation.navigate('Start',{userid: route.params?.userid})} 
                style={styles.design4}
            >
                <Text style={{color:'darkslateblue',fontSize:20,fontWeight:'bold',textAlign:'center'}}>START JOB</Text>
            </TouchableOpacity>
            <StatusBar style="auto"/>
        </View>
    );
}

额外优化点 #

• 使用可选链操作符?.简化route.params && route.params.userid的写法，代码更简洁安全
• 修复了原代码中未闭合的TouchableOpacity标签
• 用route.params?.userid || ''处理参数为空时的占位符显示问题

内容的提问来源于stack exchange，提问作者d.chan