如何在Mendix Native Mobile App中触发自动滚动到底部功能

方案1：使用原生低代码动作实现（推荐，无需编写代码） #

• 首先定位到表单所有条件可见字段的最末尾，插入一个容器组件，给这个容器设置唯一的组件名称，例如formBottomAnchor
• 选中触发条件显示的单选按钮组件，为其添加on change事件，绑定执行一个Nanoflow
• 在Nanoflow中先完成原有业务逻辑（即更新单选按钮绑定的属性值，触发条件可见规则生效），之后添加Mendix原生提供的Scroll to widget动作，选择刚才命名的formBottomAnchor作为目标组件，滚动效果可选择smooth（平滑滚动）或instant（直接跳转）

注意：该动作需要Mendix Studio Pro 9.6及以上版本，且Native Mobile Resources模块版本匹配，原生端无需额外依赖。

方案2：自定义JavaScript Action实现（兼容低版本） #

如果你的开发版本不支持内置的Scroll to widget动作，可以通过自定义JS动作实现：

• 新建JavaScript Action，命名为NativeScrollToPageBottom，无需设置传入参数
• 写入以下代码：

import { ScrollView } from 'react-native';

export async function execute() {
  ScrollView.getCurrentScrollResponder()?.scrollToEnd({ animated: true });
  return true;
}

• 将该JS Action引入到单选按钮触发的Nanoflow中，放在属性更新逻辑之后执行即可。

通用注意事项 #

• 条件字段渲染存在毫秒级延迟，可在属性更新动作和滚动动作之间，添加一个100ms的Delay动作，确保字段渲染完成后再计算滚动高度，避免滚动不到位的问题
• 如果存在多级条件触发逻辑，将滚动动作绑定到所有会触发底部字段显示的交互组件的变更事件即可。

内容的提问来源于stack exchange，提问作者Rafaelius