React Native鸿蒙Picker级联选择器开发实践

1. 为什么需要鸿蒙版Picker级联选择器

在React Native跨平台开发中，表单控件一直是高频使用的组件。传统Picker组件在iOS和Android上表现差异明显：iOS的滚轮式选择器与Android的下拉菜单式选择器不仅视觉风格迥异，更麻烦的是二级以上联动选择需要开发者自行实现状态管理。当项目需要适配鸿蒙系统时，这个问题变得更加复杂——鸿蒙的UX设计规范既不同于iOS也不同于Android，现有React Native Picker在鸿蒙设备上会出现样式错乱和手势冲突。

我最近在开发鸿蒙应用时，就遇到了一个典型场景：省市区三级联动选择。在Android/iOS双端已经封装好的<CascadePicker>组件，在鸿蒙设备上出现了以下问题：

1. 弹窗位置偏移，被虚拟按键遮挡
2. 滑动选择时出现抖动
3. 选择确认按钮无响应

经过分析发现，鸿蒙的JS UI框架对触摸事件的处理机制与Android有本质区别。这就是为什么我们需要专门为鸿蒙实现一个原生级联选择器。

2. 鸿蒙原生组件扩展方案选型

2.1 技术路线对比

实现React Native与鸿蒙原生组件交互，主要有三种方案：

对于Picker这种强交互组件，我们选择第二种方案——封装鸿蒙的Picker和PickerDialog原生组件。这样既能保持React Native的跨平台特性，又能获得原生体验。

2.2 鸿蒙侧原生代码结构

在entry/src/main/js/default/component目录下创建HarmonyCascadePicker组件：

javascript复制// HarmonyCascadePicker.js
export default {
  props: ['options', 'selectedIndex'],
  data: {
    currentSelection: [0, 0, 0] // 三级联动当前选中索引
  },
  onInit() {
    // 初始化默认选中项
    this.currentSelection = this.selectedIndex || [0, 0, 0];
  },
  handleColumnChange(e, columnIndex) {
    // 当某一列滚动时触发
    this.currentSelection[columnIndex] = e.newValue;
    
    // 如果是第一列变化，重置后两列
    if(columnIndex === 0) {
      this.currentSelection[1] = 0;
      this.currentSelection[2] = 0;
    }
    // 如果是第二列变化，重置最后一列 
    else if(columnIndex === 1) {
      this.currentSelection[2] = 0;
    }
    
    // 触发React Native侧的事件回调
    this.$emit('onChange', { 
      selectedIndex: this.currentSelection 
    });
  }
}

对应的模板文件：

html复制<!-- HarmonyCascadePicker.hml -->
<div class="container">
  <picker class="picker" 
          range="{{options[0]}}" 
          selected="{{currentSelection[0]}}"
          onchange="handleColumnChange($event, 0)">
  </picker>
  <picker class="picker"
          range="{{options[1]}}" 
          selected="{{currentSelection[1]}}"
          onchange="handleColumnChange($event, 1)">
  </picker>
  <picker class="picker"
          range="{{options[2]}}" 
          selected="{{currentSelection[2]}}"
          onchange="handleColumnChange($event, 2)">
  </picker>
</div>

3. React Native侧桥接实现

3.1 原生模块封装

在Android目录下创建HarmonyPickerPackage.java：

java复制public class HarmonyPickerPackage implements ReactPackage {
  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    return Arrays.<NativeModule>asList(new HarmonyPickerModule(reactContext));
  }

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Arrays.<ViewManager>asList(new HarmonyCascadePickerManager());
  }
}

关键的ViewManager实现：

java复制public class HarmonyCascadePickerManager extends SimpleViewManager<FrameLayout> {
  private static final String REACT_CLASS = "HarmonyCascadePicker";
  private ReactApplicationContext reactContext;

  public HarmonyCascadePickerManager(ReactApplicationContext context) {
    this.reactContext = context;
  }

  @Override
  public String getName() {
    return REACT_CLASS;
  }

  @Override
  protected FrameLayout createViewInstance(ThemedReactContext reactContext) {
    // 创建承载鸿蒙组件的容器
    FrameLayout frameLayout = new FrameLayout(reactContext);
    
    try {
      // 通过鸿蒙的AbilitySlice加载JS UI组件
      AbilitySlice slice = new AbilitySlice();
      Component component = LayoutScatter.getInstance(reactContext)
          .parse(ResourceTable.Layout_harmony_cascade_picker, null, false);
      
      frameLayout.addView(component);
    } catch (Exception e) {
      Log.e("HarmonyPicker", "Error creating harmony component", e);
    }
    
    return frameLayout;
  }
}

3.2 JavaScript组件封装

创建HarmonyCascadePicker.js作为React Native组件入口：

javascript复制import { requireNativeComponent } from 'react-native';

const HarmonyCascadePicker = requireNativeComponent(
  'HarmonyCascadePicker',
  {
    propTypes: {
      options: PropTypes.arrayOf(PropTypes.array).isRequired,
      selectedIndex: PropTypes.arrayOf(PropTypes.number),
      onChange: PropTypes.func
    }
  }
);

export default HarmonyCascadePicker;

4. 三级联动数据流处理

4.1 数据结构设计

对于省市区三级联动，推荐使用以下数据结构：

javascript复制const regionData = [
  {
    label: '北京市',
    value: '110000',
    children: [
      {
        label: '市辖区',
        value: '110100',
        children: [
          { label: '东城区', value: '110101' },
          { label: '西城区', value: '110102' }
          //...
        ]
      }
    ]
  },
  // 其他省份...
];

4.2 数据转换逻辑

由于鸿蒙原生Picker需要扁平化的数组数据，我们需要转换数据结构：

javascript复制function convertToHarmonyFormat(originalData) {
  const provinces = originalData.map(item => item.label);
  const cities = originalData[0]?.children?.map(item => item.label) || [];
  const districts = originalData[0]?.children?.[0]?.children?.map(item => item.label) || [];
  
  return [provinces, cities, districts];
}

// 使用时
const [harmonyOptions, setHarmonyOptions] = useState(() => 
  convertToHarmonyFormat(regionData)
);

const handleProvinceChange = (selectedIndex) => {
  const newCities = regionData[selectedIndex[0]]?.children?.map(c => c.label) || [];
  const newDistricts = regionData[selectedIndex[0]]?.children?.[0]?.children?.map(d => d.label) || [];
  
  setHarmonyOptions(prev => [
    prev[0], // 省份保持不变
    newCities,
    newDistricts
  ]);
};

5. 样式适配与交互动效

5.1 鸿蒙特有样式问题

在resources/base/element目录下创建picker样式：

css复制/* picker.css */
.container {
  flex-direction: row;
  width: 100%;
  height: 200px;
}

.picker {
  flex: 1;
  height: 100%;
  text-align: center;
  selected-font-size: 18px;
  selected-color: #007DFF;
}

需要特别注意鸿蒙与Android的样式差异：

1. 鸿蒙使用selected-color而不是Android的colorAccent
2. 字体大小需要单独设置selected-font-size和normal-font-size
3. 滚动惯性参数通过friction属性控制

5.2 交互动效优化

在鸿蒙的config.json中添加动画定义：

json复制{
  "abilities": [
    {
      "name": "HarmonyPickerAbility",
      "config": {
        "pickerScrollAnimation": {
          "duration": 300,
          "easing": "friction(20)"
        }
      }
    }
  ]
}

通过设置合适的friction值可以调整滚动手感：

• 值越小滚动越灵敏（类似iOS）
• 值越大滚动越沉稳（类似Android）

6. 实际开发中的坑与解决方案

6.1 虚拟按键遮挡问题

鸿蒙设备的虚拟按键会导致Picker弹窗位置计算错误。解决方案是在Ability的onWindowFocusChanged回调中动态调整位置：

java复制@Override
public void onWindowFocusChanged(boolean hasFocus) {
  if (hasFocus) {
    Display display = getWindowManager().getDefaultDisplay();
    DisplayMetrics metrics = new DisplayMetrics();
    display.getMetrics(metrics);
    
    int navigationBarHeight = 0;
    int resourceId = getResources().getIdentifier(
      "navigation_bar_height", 
      "dimen", 
      "android"
    );
    if (resourceId > 0) {
      navigationBarHeight = getResources().getDimensionPixelSize(resourceId);
    }
    
    FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) pickerContainer.getLayoutParams();
    params.bottomMargin = navigationBarHeight;
    pickerContainer.setLayoutParams(params);
  }
}

6.2 滑动冲突处理

当Picker放在ScrollView内时会出现手势冲突。需要在React Native侧添加自定义手势处理：

javascript复制const gestureResponseDistance = {
  vertical: 300, // 垂直方向响应距离
  horizontal: -1 // 水平方向不响应
};

<HarmonyCascadePicker
  {...this.props}
  onStartShouldSetResponder={() => true}
  onResponderTerminationRequest={() => false}
  onResponderGrant={() => {
    // 当手指放在Picker上时，锁定父ScrollView
    this.props.scrollEnabled && this.props.scrollEnabled(false);
  }}
  onResponderRelease={() => {
    this.props.scrollEnabled && this.props.scrollEnabled(true);
  }}
  hitSlop={gestureResponseDistance}
/>

6.3 性能优化技巧

对于大数据量的Picker（如全国城市选择），需要做以下优化：

1. 分帧加载：将数据分批渲染

javascript复制function chunkArray(array, size) {
  const chunks = [];
  for (let i = 0; i < array.length; i += size) {
    chunks.push(array.slice(i, i + size));
  }
  return chunks;
}

// 使用requestAnimationFrame分批更新
const loadDataInFrames = (fullData) => {
  const chunks = chunkArray(fullData, 50);
  let currentChunk = 0;
  
  const loadNextChunk = () => {
    if (currentChunk < chunks.length) {
      setCurrentData(prev => [...prev, ...chunks[currentChunk]]);
      currentChunk++;
      requestAnimationFrame(loadNextChunk);
    }
  };
  
  loadNextChunk();
};

2. 虚拟滚动：只渲染可视区域内的项目

javascript复制// 在鸿蒙JS UI中使用list组件的cachedCount属性
<list id="pickerList" cachedCount="10">
  <!-- 列表项 -->
</list>

3. 内存优化：避免频繁创建新数组

javascript复制// 不好的做法 - 每次创建新数组
setOptions([...prevOptions, newItem]);

// 好的做法 - 复用内存
prevOptions.push(newItem);
setOptions(prevOptions);

7. 测试验证方案

7.1 单元测试要点

针对鸿蒙Picker需要特别测试的场景：

1. 边界值测试：

   • 第一项和最后一项的选择
   • 空数据源情况
   • 单列数据情况

2. 交互测试：

   • 快速滑动时的性能表现
   • 滑动中途突然反向滑动
   • 多点触控情况下的行为

3. 跨平台一致性测试：

   • 与iOS/Android版本的数据同步
   • 多端事件回调的一致性

7.2 自动化测试脚本

使用鸿蒙的UITest框架编写测试用例：

java复制@RunWith(OhosTestRunner.class)
public class PickerUITest {
  private final TestRule rule = new TestRule();

  @Test
  public void testCascadeSelection() {
    // 启动测试Ability
    Intent intent = new Intent();
    Operation operation = new Intent.OperationBuilder()
      .withDeviceId("")
      .withBundleName("com.example.pickerdemo")
      .withAbilityName("MainAbility")
      .build();
    intent.setOperation(operation);
    
    rule.startAbility(intent);
    
    // 查找Picker组件
    Component picker = rule.findComponent(ResourceTable.Id_picker);
    assertThat(picker, notNullValue());
    
    // 模拟滑动操作
    TouchEvent[] events = {
      TouchEvent.obtain(100, 100, TouchEvent.TOUCH_DOWN),
      TouchEvent.obtain(100, 80, TouchEvent.TOUCH_MOVE),
      TouchEvent.obtain(100, 60, TouchEvent.TOUCH_UP)
    };
    rule.runOnUiThread(() -> picker.dispatchTouchEvent(events));
    
    // 验证选中项
    int selected = ((Picker)picker).getSelected();
    assertThat(selected, is(1));
  }
}

8. 部署与发布注意事项

8.1 鸿蒙应用打包

在build.gradle中添加鸿蒙依赖：

groovy复制dependencies {
  implementation 'io.openharmony.tpc.thirdlib:XReactNative:1.0.0'
  implementation project(':harmony-picker')
}

打包时需要特别注意：

1. 在entry/build-profile.json5中声明native组件

json复制{
  "targets": [
    {
      "name": "default",
      "jsComponents": [
        {
          "name": "HarmonyCascadePicker",
          "path": "../harmony-picker"
        }
      ]
    }
  ]
}

2. 配置签名信息

json复制{
  "signingConfigs": [
    {
      "name": "default",
      "certificatePath": "signature/cert.p7b",
      "deviceType": [
        "phone",
        "tablet"
      ]
    }
  ]
}

8.2 动态加载策略

对于需要动态更新Picker样式的场景，可以使用鸿蒙的Hap包动态加载：

javascript复制import featureAbility from '@ohos.ability.featureAbility';

const loadDynamicHap = async (hapPath) => {
  try {
    const installResult = await featureAbility.installBundle(hapPath);
    if (installResult === 0) {
      const bundleName = 'com.example.pickerskin';
      const abilityName = 'com.example.pickerskin.MainAbility';
      
      await featureAbility.startAbility({
        bundleName,
        abilityName
      });
      
      return true;
    }
  } catch (error) {
    console.error('Dynamic hap load failed:', error);
  }
  return false;
};

这种方案特别适合需要频繁更新地区数据的场景，可以避免发布完整应用更新。