React Native for OpenHarmony 实战：三方库 react-native-switch-selector 的鸿蒙化适配指南

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */
#content_views .toc,
/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */
#content_views.markdown_views > p:empty:has(+ .toc),
#content_views.markdown_views > .toc + p:empty,
/* 富文本旧版目录标记 */
#content_views.htmledit_views #main-toc,
#content_views.htmledit_views #hr-toc,
#content_views.htmledit_views p[id*=\”-toc\”] {
display: none !important;
}
/* 目录去掉后，紧跟的首个标题不再多出一块上边距 */
#content_views.markdown_views > .toc + h1,
#content_views.markdown_views > .toc + h2,
#content_views.markdown_views > .toc + h3,
#content_views.markdown_views > .toc + h4,
#content_views.markdown_views > .toc + p:empty + h1,
#content_views.markdown_views > .toc + p:empty + h2,
#content_views.markdown_views > .toc + p:empty + h3,
#content_views.markdown_views > .toc + p:empty + h4 {
margin-top: 0 !important;
}

本文记录把 react-native-switch-selector（二选一开关 / 分段开关）适配到 HarmonyOS 的完整过程。

它是一个纯 JS class 组件（index.js 336 行），用一个会滑动的色块表示当前选中项，还支持左右滑动切换。它带来一个很容易让人以为"组件坏了"的默认值：

defaultProps.initial = -1，而源码里

getBgColor() {
const { selected } = this.state;
if (selected === –1) { return 'transparent'; } // ← 滑块变透明
return options[selected]?.activeColor || buttonColor;
}

⇒ 不传 initial（也不传 value）时，滑块是透明的 —— 屏慕上只看得到文字和边框，看不到那个会动的色块，而且不报错、不警告。

实测（滑块颜色是 buttonColor: '#BCD635'，黄绿）：不传 initial 的实例，按该颜色扫全屏是 0 个像素 ✓

另一个很适合做量化验证的点：滑块的几何可以精确算出来。hasPadding=false、buttonMargin=0 时：

滑块宽度 = width / options.length
translateX = (k / options.length) · width ← animatedValue = k/N 插值到 [0, width]
⇒ 滑块左边界 = (k/N)·width，宽 = width/N ⇒ 正好覆盖第 k 格

实测（容器宽 1248px、N=2）三个实例：

而且交互也一并验到了：点右侧选项 ⇒ PRESS W1 onPress(off)（拿到的是该选项的 value）✓

设备侧断言 34 / 34 全部通过。

一、先说结论

二、判定与接入

npm install "git+https://atomgit.com/oh-react-native/react-native-switch-selector.git#2.3.0-ohos-1.0.0" –ignore-scripts

# ⚠️ 它自带运行时依赖 prop-types，目录/软链接入不会自动装
npm install prop-types –ignore-scripts

// metro.config.js
watchFolders: [ path.resolve(__dirname, '../react-native-switch-selector') ],

import SwitchSelectorTestApp from './SwitchSelectorTestApp';
AppRegistry.registerComponent('SwitchSelectorTestApp', () => SwitchSelectorTestApp);

hdc shell aa force-stop com.rnoh084.demo
hdc shell aa start -b com.rnoh084.demo -a EntryAbility –ps rnAppKey SwitchSelectorTestApp

不需要 HAR、权限、ohpm、link-harmony。

三、读源码取到的真值（index.js，336 行）

3.1 组件形态

export default class SwitchSelector extends Component {
…
// ⚠️ 下面三个是【箭头函数的类字段】⇒ 挂在【实例】上，不在 prototype 上
responderEnd = (evt, gestureState) => { … };
animate = (value, last) => { … };
toggleItem = (index, callOnPress = true) => { … };
}
SwitchSelector.defaultProps = { … 30 个键 … };
SwitchSelector.propTypes = { … 30 个键 … };

要点：

3.2 ★★ defaultProps 里的两个"陷阱默认值"

SwitchSelector.defaultProps = {
options: [],
textColor: '#000000',
selectedColor: '#FFFFFF',
fontSize: 14,
backgroundColor: '#FFFFFF',
borderColor: '#C9C9C9',
borderRadius: 50,
borderWidth: 1,
hasPadding: false,
valuePadding: 1,
height: 40,
bold: false,
buttonMargin: 0,
buttonColor: '#BCD635', // ★ 滑块的默认颜色
returnObject: false,
animationDuration: 100,
disabled: false,
disableValueChangeOnPress: false,
initial: –1, // ★★ 默认 -1 ⇒ 滑块透明！
value: 1, // ⚠️ 它还有个 value 默认值（受控用）
onPress: null,
accessibilityLabel: null,
testID: null,
touchableProps: {},
…
};

3.3 ★ 滑块几何（可精确预言）

// 轨道 onLayout：
this.setState({ sliderWidth: width – (hasPadding ? 2 : 0) });

// 滑块：
width: sliderWidth / options.length – ((hasPadding ? valuePadding : 0) + buttonMargin * 2),
transform: [{ translateX: this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [hasPadding ? valuePadding : 0, sliderWidth – (hasPadding ? valuePadding : 0)],
})}],

// 动画：
this.animatedValue = new Animated.Value(initial ? initial / options.length : 0);
animate = (value, last) => { this.animatedValue.setValue(last);
Animated.timing(this.animatedValue, { toValue: value, duration: animationDuration,
easing: Easing.cubic, useNativeDriver: true }).start(); };
// toggleItem 里：this.animate(index / options.length, selected / options.length)

⇒ hasPadding=false, buttonMargin=0 时：滑块宽度 = width/N、左边界 = (k/N)·width ⇒ 正好覆盖第 k 格。

⚠️ useNativeDriver: true ⇒ 滑块位移是 transform + 原生驱动 ⇒ 布局 dump 读不到 ⇒ 必须走像素。

3.4 交互与边界

toggleItem = (index, callOnPress = true) => {
if (options.length <= 1 || index === null || isNaN(index)) return; // ★ 边界①
this.animate(…);
if (callOnPress && onPress) { onPress(returnObject ? options[index] : options[index].value); }
else { console.log('Call onPress with value: ', options[index].value); } // ★ 没 onPress 时打日志
this.setState({ selected: index });
};

// ★ 边界②：value 变化时
componentDidUpdate(prevProps) {
const { value, disableValueChangeOnPress } = this.props;
if (prevProps.value !== value) { this.toggleItem(value, !disableValueChangeOnPress); }
}

// ★ 边界③：拖动切换（PanResponder）
shouldSetResponder = (evt, g) => evt.nativeEvent.touches.length === 1
&& !(Math.abs(g.dx) < 5 && Math.abs(g.dy) < 5); // 需要真的拖动
getSwipeDirection = (g) => (Math.abs(g.vx) > 0.1 && Math.abs(g.dy) < 80)
? (g.dx > 0 ? 'RIGHT' : 'LEFT') : null; // 0.1 速度阈值

四、验证设计

五、实测结果

5.1 断言 34 / 34

5.2 ★★ 滑块像素判据（本轮核心）

容器宽 1248px、左边界 36px、N=2 ⇒ 每格 624px：

⇒ “传 initial 就有滑块、位置正确；不传就完全没有” 两个结论都成立。

5.3 ★ 交互与选项命中区

从布局 dump 量 W1 的两个选项：

y=901..950 x=36..660 (w=624) ← 左侧选项
y=901..950 x=660..1284 (w=624) ← 右侧选项

⇒ 各占 624px = W/2 ✓（与滑块宽度预言一致）。

点击右侧选项（75% 处，坐标 (990, 925)）⇒ 日志：

PRESS W1 onPress(off)

⇒ onPress 触发，且拿到的是该选项的 value（'off'） ✓（returnObject 为 false 时的行为）

5.4 UI：标题不与状态栏重合

TITLE measureInWindow y=420 （状态栏高 117） ⇒ 420 > 117，不重合 ✓

六、我自己的一个失误

我把 toggleItem / animate / responderEnd 当成原型方法去断言，结果三条全挂：

✗ [A] 原型上有 toggleItem｜期望 function｜实际 undefined
✗ [A] 原型上有 animate｜期望 function｜实际 undefined
✗ [A] 原型上有 responderEnd｜期望 function｜实际 undefined

读源码后确认：它们是箭头函数的类字段（toggleItem = (index, callOnPress = true) => {…}）—— 经 Babel 的 class-properties 转换后，它们被赋值到实例上，而不在 prototype 上。

纠正：断言改为 typeof SS.prototype.toggleItem === 'undefined'（并保留 prototype.render === 'function' 作为"它确实是 class"的证据）。

教训："写在 class 体里的方法"未必在 prototype 上 —— 箭头函数形式的类字段挂在实例上。⇒ 要判断"是不是原型方法"，得看写法（method() {} vs field = () => {}），或者干脆用 typeof proto.x 实测。

七、已知限制与本次验证边界

7.1 用这个库要知道的

7.2 本次验证的边界

未改动库代码。

八、常见问题

Q1：我用了这个组件，但看不到那个会滑动的色块？

大概率是没传 initial。 它的默认值是 -1，而源码里：

getBgColor() {
const { selected } = this.state;
if (selected === –1) { return 'transparent'; }
return options[selected]?.activeColor || buttonColor;
}

⇒ 滑块被设成透明。传 initial={0}（或受控地传 value）即可：

<SwitchSelector initial={0} options={[{label:'开',value:'on'},{label:'关',value:'off'}]} />

实测：不传 initial 的实例，按滑块颜色 #BCD635 扫全屏 0 像素。

Q2：滑块颜色/位置怎么算？

• 颜色：buttonColor（默认 #BCD635），或某个选项的 activeColor；
• 位置（hasPadding=false, buttonMargin=0）：左边界 = (k/N)·width、宽 = width/N，正好覆盖第 k 格（实测 N=2 时 37…658 与 661…1282）。

Q3：onPress 给的是什么？

默认给该选项的 value（returnObject: false）。传 returnObject 则给整个选项对象。

onPress={(v) => console.log(v)} // 'off'
onPress={(v) => console.log(v.label)} // 需要 returnObject

⚠️ 不传 onPress 时源码会 console.log('Call onPress with value: ', …)（不是报错）。

Q4：为什么我改 value 之后界面动了，但 onPress 没触发？

因为 componentDidUpdate 是：this.toggleItem(value, !disableValueChangeOnPress) —— disableValueChangeOnPress: true 时第二个参数是 false，于是只做动画 + setState，不给回调。

Q5：为什么点第 1 个选项没反应？

如果 options.length <= 1，toggleItem 会直接 return（源码第一行守卫）。另外 disabled 或 options[i].disabled 也会让该选项不可点。

Q6：能左右滑动切换吗？

能（PanResponder）。但要注意阈值：shouldSetResponder 要求位移 ≥5，getSwipeDirection 要求 |vx| > 0.1 且 |dy| < 80 ⇒ 轻轻一碰不会切，得是有点速度的横向拖动。（本轮未实测这条。）

Q7：npm install 之后报找不到 prop-types？

因为它带了运行时依赖 prop-types@^15.7.2，而目录/file: 接入不会安装目标包自己的 dependencies：

npm install prop-types –ignore-scripts

（走 .tgz 安装会被自动带上。）

Q8：这个库需要鸿蒙侧做什么特殊处理吗？

不需要。 纯 JS、无原生模块、不需要 HAR / 权限 / ohpm。唯一要注意的是上文那条 initial 默认值和 prop-types 依赖。

小结

react-native-switch-selector 是纯 JS class 组件（index.js 336 行），零原生接线。设备侧 34 / 34 断言通过。

最值得记下来的是这几条：

本篇用到的库

# 从适配仓库安装
npm install "git+https://atomgit.com/oh-react-native/react-native-switch-selector.git#2.3.0-ohos-1.0.0" –ignore-scripts

# 本地目录接入（开发常用）：必须补 prop-types
npm install ../react-native-switch-selector –ignore-scripts
npm install prop-types –ignore-scripts

// metro.config.js
watchFolders: [ path.resolve(__dirname, '../react-native-switch-selector') ],

import SwitchSelector from 'react-native-switch-selector';

// ✅ 正确：传 initial（否则滑块透明，屏上看不到）
<SwitchSelector
initial={0}
options={[
{label: '开', value: 'on'},
{label: '关', value: 'off'},
]}
onPress={(value) => console.log('选中', value)} // 默认拿到 value
/>

// 受控 + 想要整个选项对象
const [v, setV] = useState(0);
<SwitchSelector
initial={0}
value={v}
returnObject
options={[{label:'A',value:'a'},{label:'B',value:'b'},{label:'C',value:'c'}]}
onPress={(opt) => setV(opt.value === 'b' ? 1 : opt.value === 'c' ? 2 : 0)}
/>

// 自定义外观（含滑块颜色）
<SwitchSelector
initial={1}
options={[{label:'是',value:'y'},{label:'否',value:'n'}]}
buttonColor="#BCD635" // 滑块颜色
selectedColor="#FFFFFF" // 选中项文字色
textColor="#000000"
backgroundColor="#FFFFFF"
borderColor="#C9C9C9"
borderRadius={50}
height={40}
animationDuration={100}
/>

# 换页启动测试页（force-stop 不能省，换页参数只在冷启动生效）
hdc shell aa force-stop com.rnoh084.demo
hdc shell aa start -b com.rnoh084.demo -a EntryAbility –ps rnAppKey SwitchSelectorTestApp

像素判据的复现方式

# 滑块颜色 = buttonColor（默认 #BCD635 = RGB 188,214,53）
Add-Type –AssemblyName System.Drawing
$b = New-Object System.Drawing.Bitmap('shot.jpeg')
$xs = @()
for ($x = 0; $x -lt $b.Width; $x++) {
$p = $b.GetPixel($x, $trackMidY)
if ([Math]::Abs($p.R-188) -lt 26 -and [Math]::Abs($p.G-214) -lt 26 -and [Math]::Abs($p.B-53) -lt 26) { $xs += $x }
}
# N=2 时：k=0 ⇒ 左半；k=1 ⇒ 右半；不传 initial ⇒ 一个像素都扫不到

验证环境

相关社区与项目地址

欢迎加入 CPF-RN 鸿蒙社区：https://atomgit.com/CPF-RN

React Native for OpenHarmony 组织：https://atomgit.com/oh-react-native

RN 三方库鸿蒙适配清单：https://atomgit.com/oh-react-native/rn-ohos-adaptation-overview