> For the complete documentation index, see [llms.txt](https://developers-apps-in-toss.toss.im/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers-apps-in-toss.toss.im/documentation/api-and-sdk-zh/react-native/interaction.md).
# 响应处理
本文档中 **与用户交互直接相关的 UI/UX 功能**会进行介绍。像滚动、键盘、音频焦点、触觉震动等 **需要对用户行为立即响应的功能**会集中在一处说明。
***
### 滚动弹性区域背景处理
**SDK 组件：** `ScrollViewInertialBackground`
iOS `ScrollView`是在 ScrollView 滚动到末端时出现的 \*\*弹性效果区域（上/下）\*\* 中填充背景色，从而提供更自然的视觉效果的组件。
**签名**
```ts
function ScrollViewInertialBackground({
topColor,
bottomColor,
spacer: _spacer,
}: ScrollViewInertialBackgroundProps): JSX.Element;
```
**参数**
* props 对象
传递给组件的 `props` 对象。
* **props.topColor** · `string`
应用于滚动上方区域的背景色。默认值会根据系统主题自动应用的 `adaptive.background`。
* **props.bottomColor** · `string`
应用于滚动下方区域的背景色。默认值会根据系统主题自动应用的 `adaptive.background`。
* **props.spacer** · `number`
用于指定应用背景色的内容上下空间之间的间距大小。默认值是 [`useWindowDimensions`](https://reactnative.dev/docs/next/usewindowdimensions)获取的屏幕高度。
**示例：为滚动视图上下添加背景色**
在滚动视图上方添加红色背景、下方添加蓝色背景。背景色会应用到滚动范围之外的区域。
```tsx
import { ScrollView, View, Text } from 'react-native';
import { ScrollViewInertialBackground } from '@granite-js/react-native';
const dummies = Array.from({ length: 20 }, (_, i) => i);
function InertialBackgroundExample() {
return (
{dummies.map((i) => (
请滚动看看。
))}
);
}
```
***
### 颜色模式类型
**SDK API:** `ColorPreference`
当前设备的 **颜色模式（亮色 / 暗色）** 的类型。用于主题分支或样式条件处理。
**签名**
```typescript
type ColorPreference = 'light' | 'dark';
```
***
### 将元素抬到键盘上方
**SDK 组件：** `KeyboardAboveView`
当键盘出现时 **会自动将子组件抬到键盘上方的布局组件**。在输入过程中也希望按钮或操作区域始终可见时很有用。
**签名**
```typescript
function KeyboardAboveView({ style, children, ...props }: ComponentProps): ReactElement;
```
**参数**
* props.styleStyleProp\
可以应用额外的样式。例如，可以设置背景色或尺寸等。
* props.childrenReactNode
当键盘出现时要显示在键盘上方的组件。例如，可以放入按钮、文本输入框等。
**返回值**
* ReactElement
键盘出现时调整到键盘上方的 [`Animated.View`](https://reactnative.dev/docs/animated#createanimatedcomponent)会返回。
**示例：将元素抬到键盘上方**
```tsx
import { ScrollView, TextInput, View, Text } from 'react-native';
import { KeyboardAboveView } from '@granite-js/react-native';
function KeyboardAboveViewExample() {
return (
<>
在 Keyboard 上方。
);
}
```
***
### 音频焦点变更回调
**SDK API:** `OnAudioFocusChanged`
视频或音频组件的 **在音频焦点发生变化时调用的回调类型**。可以控制因其他应用或系统事件导致声音中断时的处理。
**签名**
```typescript
type OnAudioFocusChanged = NonNullable;
```
**参数**
* **event** · 必需 · `Object`
包含音频焦点信息的事件对象。
* **event.hasAudioFocus** · 必需 · `boolean`
表示视频组件是否拥有音频焦点。
***
### 执行触觉震动
**SDK 函数：** `generateHapticFeedback`
在设备上 **触发触觉震动的函数**。用于按钮点击、完成通知、成功/失败反馈等需要触觉反馈的时刻。
**签名**
```typescript
function generateHapticFeedback(options: HapticFeedbackOptions): Promise;
```
**返回值**
* void
**示例：按下按钮触发触觉反馈**
{% tabs %}
{% tab title="js" %}
```js
import { generateHapticFeedback } from '@apps-in-toss/web-framework';
generateHapticFeedback({ type: 'tickWeak' });
```
{% endtab %}
{% tab title="React" %}
```tsx
import React from 'react';
import { generateHapticFeedback } from '@apps-in-toss/web-framework';
function GenerateHapticFeedbackWeb() {
return (
);
}
export default GenerateHapticFeedbackWeb;
```
{% endtab %}
{% tab title="React Native" %}
```tsx
import { Button } from 'react-native';
import { generateHapticFeedback } from '@apps-in-toss/framework';
function GenerateHapticFeedback() {
return (