iOS端,actionsheet和input组合后出现问题

小程序开发相关产品技术讨论,包括面板、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具(IDE)及其他开发技术相关等话题


Post Reply
silverlight
Posts: 114

  • Tuya MiniApp Tools 版本信息:
    Node: v18.20.1
    Tools: 0.7.1
    Ray: 1.5.20
    actionsheet用的是物料广场中的"@ray-js/components-ty-actionsheet": "0.0.26",
    input用的是import { Input } from '@ray-js/ray';
    • @ray-js/ray, @ray-js/panel-sdk的版本 :
      "@ray-js/panel-sdk": "1.10.0",
      "@ray-js/ray": "1.5.20",
    • 移动设备信息:ios系统,iPhone13
    • 相关代码:

      Code: Select all

                    const [visible3, setVisible3] = useState(false);
      		  const { modal: modal3 } = ActionSheet.useActionSheet({
          initData:datastring,
          position: "bottom",
          header: {
            content: name,
          },
          cancelText: Strings.getLang('cancel'),
          okText: Strings.getLang('confirm'),
          show: visible3,
          footerClassName:styles.actionSheet,
          headerClassName	:styles.actionSheet,
          contentClassName:styles.actionSheet,
          onClickOverlay: () => setVisible3(false),
          onOk: () => {
              setVisible3(false);
          },
          onCancel: () => {
            setVisible3(false);
          },
          content: () => (
            <View className={styles.sheetbox}>
              <Input
              placeholder={datastring}
              type="text"
              value={datastring}
              onInput={handleInput}
              onFocus={(e) => {
                console.log('onFocus', e);
              }}
              onBlur={(e) => {
                console.log('onBlur', e);
              }}
              onConfirm={(e) => {
                console.log('confirm', e);
              }}
            />
            </View>
          ),
        });
                 
    • 问题描述(复现步骤):
      点击“主动报警”弹出动作面板,动作面板中内嵌了一个输入框,点击输入框,输入数据后,点击确认或取消隐藏动作面板。
      我通过viseble3来控制动作面板show的属性值,动作面板中的确认和取消点击后执行setVisible3(false);
    • 预期结果:
      点击输入框后,动作面板位置在输入法界面的上面一点点的地方,且点击确认和取消后,动作面板隐藏不显示。
    • 实际结果(文末有gif展示):
      安卓端没有这个问题
      1:在点击“输入框”后,“动作面板”和“光标”位置错误,在输入内容后,“光标”位置得到修正,但是“输入框”位置依然不对。
      2:点击确认后,“动作面板”隐藏,但是“输入框”的界面依然保留在页面中,且此时这个“输入框”无法交互点击。文末展示里,重新弹出“动作面板”进行操作后,使“输入框”隐藏了,但有时候无法隐藏。
      3:还有时候点击“输入框”,“动作面板”位置错误,当“光标”位置正确。
      4:而“光标”和“动作面板”有时候位置又是正确,且点击确认或取消能正常隐藏“动作面板”。
      动作面板.gif
Last edited by silverlight on 2024年 Sep 12日 09:26, edited 6 times in total.

Tags:
crisiron
Posts: 93

Re: iOS端,actionsheet和input组合后出现问题

建议使用 https://developer.tuya.com/material/sma ... tion-sheet smart-ui 的组件,smart-ui 组件库整体风格统一,麻烦使用smart-ui 确定是否正常,如果有问题麻烦及时反馈

silverlight
Posts: 114

Re: iOS端,actionsheet和input组合后出现问题

crisiron 2024年 Sep 10日 18:30

建议使用 https://developer.tuya.com/material/sma ... tion-sheet smart-ui 的组件,smart-ui 组件库整体风格统一,麻烦使用smart-ui 确定是否正常,如果有问题麻烦及时反馈

smart-ui中的这两个组件目初步测试下来,没有问题,而且ios和安卓端效果基本一致,接下来我会继续测试。
请问一下,1:接下来组件更新是以smart-ui为主吗?
2:原先物料广场的组件会整合进来,还是单独更新?

crisiron
Posts: 93

Re: iOS端,actionsheet和input组合后出现问题

后续基础组件主要是以 smart-ui 为主,原先物料广场的组件作为补充,一般为特定品类提供的组件

silverlight
Posts: 114

Re: iOS端,actionsheet和input组合后出现问题

crisiron 2024年 Sep 12日 09:41

后续基础组件主要是以 smart-ui 为主,原先物料广场的组件作为补充,一般为特定品类提供的组件

好的,谢谢

Post Reply