Tuya Developer Forum

import React, { useState, useRef } from 'react';
import { View, navigateBack } from '@ray-js/ray';
import { NavBar, Field } from '@ray-js/smart-ui';
import { NoticeTip } from '@/components';
import styles from './index.module.less';

export function Password(props) {
const { query } = props.location;
const noticeTipRef = useRef(null);
const [focusIndex, setFocusIndex] = useState(0);
const [password, setPassword] = useState(['', '', '', '']);

const onClickLeft = () => {
navigateBack();
};

const handleInputChange = (e, index) => {
const value = e.detail;
const filtered = value.replace(/[⁰-9]/g, '');
if (filtered) {
setFocusIndex(index + 1);
}
setPassword(prev => {
const newArray = [...prev];
newArray[index] = filtered;
return newArray;
});
};

return (
<>
<NavBar
title="密码"
leftArrow
onClickLeft={onClickLeft}
custom-class={styles['nav-bar']}
placeholder
fixed
border={false}
/>
<NoticeTip ref={noticeTipRef} />
<View>{JSON.stringify(password)}</View>
<View className={styles.container}>
<View className={styles.body}>
{password.map((item, index) => (
<View key={index} className={styles['input-box']}>
<Field
value={item}
focus={focusIndex === index}
type="number"
hiddenLabel
label=""
placeholder=""
inputAlign="center"
maxlength={1}
onInput={e => handleInputChange(e, index)}
center
holdKeyboard
disableDefaultPadding
/>
</View>
))}
</View>
</View>
</>
);
}

export default Password;

目前小程序原生不支持自动 focus ，后续这些属性会下掉

                <Field
                  value={timeValue}
                  placeholder="10"
                  placeholderStyle={{ color: '#0074FF', fontSize: '15px' }}
                  onChange={handleTimeValueChange}
                  inputAlign='center'
                  adjustPosition={false}
                  hiddenLabel={true}
                  className={styles.inputStyle}
                  type='number'
                  customStyle={{
                    color: '#FFFFFF',
                    fontSize: '15px',
                    display: 'flex',
                    flexDirection: 'row',
                    backgroundColor: 'black',
                    height: '40px',
                    borderRadius: '20px',
                    alignItems: 'center',
                    justifyContent: 'center',
                    minHeight: '40px',
                    maxHeight: '40px',
                    overflow: 'hidden',
                    width: '95px',
                    marginLeft: '8px',
                  }}
                />

在iOS真机上面。会出现问题。 Field获取焦点以后，整个界面会向上移动，键盘弹出。点击Done后，键盘收起后，整个界面也不会退回来，导致导航栏显示不全。具体看附件。

需要 index.config.ts 内设置 disableScroll: false 否则会无法滚动回来 这个后续基础库会修复 但是目前暂时只能这么处理

已配置了
还是有bug