1k-ui-recipes

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

OneKey UI Recipes

OneKey UI 实用解决方案

Bite-sized solutions for common UI issues.

针对常见UI问题的轻量解决方案。

Quick Reference

快速参考

Recipe	Guide	Key Points
iOS Tab Bar Scroll Offset	ios-tab-bar-scroll-offset.md	Use `useScrollContentTabBarOffset` for `paddingBottom` on iOS tab pages
Smooth State Transitions	start-view-transition.md	Wrap heavy state updates in `startViewTransition` for fade on web
Horizontal Scroll in Collapsible Tab Headers	collapsible-tab-horizontal-scroll.md	Bidirectional `Gesture.Pan()` + programmatic `scrollTo` via `CollapsibleTabContext`
Android Bottom Tab Touch Interception	android-bottom-tab-touch-intercept.md	Temporary — `GestureDetector` + `Gesture.Tap()` in `.android.tsx` to bypass native tab bar touch stealing

解决方案	指南文档	核心要点
iOS标签栏滚动偏移	ios-tab-bar-scroll-offset.md	在iOS标签页中使用 `useScrollContentTabBarOffset` 设置 `paddingBottom`
流畅状态过渡	start-view-transition.md	在Web端通过将大量状态更新逻辑包裹在 `startViewTransition` 中实现淡入淡出效果
可折叠标签头中的横向滚动	collapsible-tab-horizontal-scroll.md	双向 `Gesture.Pan()` + 通过 `CollapsibleTabContext` 以编程方式调用 `scrollTo`
Android底部标签触摸拦截	android-bottom-tab-touch-intercept.md	临时方案 — 在 `.android.tsx` 中使用 `GestureDetector` + `Gesture.Tap()` 绕过原生标签栏的触摸事件抢占

Critical Rules Summary

核心规则总结

1. iOS Tab Bar Scroll Content Offset

1. iOS标签栏滚动内容偏移

Use

useScrollContentTabBarOffset

to add dynamic

paddingBottom

to scroll containers inside tab pages. Returns tab bar height on iOS,

undefined

on other platforms.

typescript

import { useScrollContentTabBarOffset } from '@onekeyhq/components';

const tabBarHeight = useScrollContentTabBarOffset();
<ScrollView contentContainerStyle={{ paddingBottom: tabBarHeight }} />

使用

useScrollContentTabBarOffset

为标签页内的滚动容器添加动态

paddingBottom

。该方法在iOS平台返回标签栏高度，在其他平台返回

undefined

。

typescript

import { useScrollContentTabBarOffset } from '@onekeyhq/components';

const tabBarHeight = useScrollContentTabBarOffset();
<ScrollView contentContainerStyle={{ paddingBottom: tabBarHeight }} />

2. Smooth State Transitions with

startViewTransition

2. 使用

startViewTransition

实现流畅状态过渡

Wrap heavy state updates in

startViewTransition

— fade on web/desktop via View Transition API,

setTimeout

fallback on native.

typescript

import { startViewTransition } from '@onekeyhq/components';

startViewTransition(() => {
  setIsReady(true);
});

将大量状态更新逻辑包裹在

startViewTransition

中——在Web/桌面端通过View Transition API实现淡入淡出效果，在原生端使用

setTimeout

作为降级方案。

typescript

import { startViewTransition } from '@onekeyhq/components';

startViewTransition(() => {
  setIsReady(true);
});

3. Horizontal Scroll in Collapsible Tab Headers (Native)

3. 可折叠标签头中的横向滚动（原生端）

When placing a horizontal scroller inside

renderHeader

of collapsible tabs, use

Gesture.Pan()

that handles both directions — horizontal drives

translateX

, vertical calls

scrollTo

on the focused tab's ScrollView via

CollapsibleTabContext

typescript

import { CollapsibleTabContext } from '@onekeyhq/components';

Do NOT import directly from
react-native-collapsible-tab-view/src/Context
. Always use the
@onekeyhq/components
re-export.

在可折叠标签的

renderHeader

中放置横向滚动组件时，使用支持双向的

Gesture.Pan()

——横向手势控制

translateX

，纵向手势通过

CollapsibleTabContext

调用当前聚焦标签的ScrollView的

scrollTo

方法。

typescript

import { CollapsibleTabContext } from '@onekeyhq/components';

请勿直接从
react-native-collapsible-tab-view/src/Context
导入，始终使用
@onekeyhq/components
提供的重导出版本。

4. Android Bottom Tab Touch Interception (Temporary Workaround)

4. Android底部标签触摸拦截（临时修复方案）

Temporary fix — the root cause is
react-native-bottom-tabs
intercepting touches even when hidden. This workaround should be removed once the upstream issue is fixed.

On Android,

react-native-bottom-tabs

intercepts touches in the tab bar region even when the tab bar is

GONE

. Buttons near the bottom of the screen become unclickable. Fix by creating a

.android.tsx

variant that wraps buttons with

GestureDetector

Gesture.Tap()

typescript

import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { runOnJS } from 'react-native-reanimated';

const tapGesture = useMemo(
  () => Gesture.Tap().onEnd(() => { 'worklet'; runOnJS(onPress)(); }),
  [onPress],
);

<GestureDetector gesture={tapGesture}>
  <View>
    <Button>Label</Button>
  </View>
</GestureDetector>

Use
.android.tsx
file extension so other platforms are unaffected.

临时修复 — 根本原因是
react-native-bottom-tabs
即使在标签栏隐藏时仍会拦截触摸事件。待上游问题修复后，应移除该方案。

在Android平台，

react-native-bottom-tabs

会在标签栏区域拦截触摸事件，即使标签栏已设置为

GONE

状态，导致屏幕底部附近的按钮无法点击。修复方法是创建

.android.tsx

变体文件，使用

GestureDetector

Gesture.Tap()

包裹按钮：

typescript

import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { runOnJS } from 'react-native-reanimated';

const tapGesture = useMemo(
  () => Gesture.Tap().onEnd(() => { 'worklet'; runOnJS(onPress)(); }),
  [onPress],
);

<GestureDetector gesture={tapGesture}>
  <View>
    <Button>Label</Button>
  </View>
</GestureDetector>

使用
.android.tsx
文件扩展名，避免影响其他平台。

1k-ui-recipes

Original

Translation

OneKey UI Recipes

OneKey UI 实用解决方案

Quick Reference

快速参考

Critical Rules Summary

核心规则总结

1. iOS Tab Bar Scroll Content Offset

1. iOS标签栏滚动内容偏移

2. Smooth State Transitions with
`startViewTransition`

2. 使用
`startViewTransition`
实现流畅状态过渡

3. Horizontal Scroll in Collapsible Tab Headers (Native)

3. 可折叠标签头中的横向滚动（原生端）

4. Android Bottom Tab Touch Interception (Temporary Workaround)

4. Android底部标签触摸拦截（临时修复方案）

Related Skills

相关技能

1k-ui-recipes

Original

Translation

OneKey UI Recipes

OneKey UI 实用解决方案

Quick Reference

快速参考

Critical Rules Summary

核心规则总结

1. iOS Tab Bar Scroll Content Offset

1. iOS标签栏滚动内容偏移

2. Smooth State Transitions with startViewTransition

2. 使用startViewTransition实现流畅状态过渡

3. Horizontal Scroll in Collapsible Tab Headers (Native)

3. 可折叠标签头中的横向滚动（原生端）

4. Android Bottom Tab Touch Interception (Temporary Workaround)

4. Android底部标签触摸拦截（临时修复方案）

Related Skills

相关技能

2. Smooth State Transitions with
`startViewTransition`

2. 使用
`startViewTransition`
实现流畅状态过渡