滑块
用于从连续或分段范围中选择值的控件。
For the complete documentation index, see llms.txt. Use this file to discover all available pages.
一个受控滑块，用于在范围内选择数值。将 value 与 onValueChange 配对使用，以从 React 管理状态。
安装
- npx expo install @expo/uiIf you are installing this in an existing React Native app, make sure to install expo in your project.
用法
连续滑块
默认范围是 [0, 1]。
import { useState } from 'react'; import { Host, Slider } from '@expo/ui'; export default function ContinuousSliderExample() { const [value, setValue] = useState(0.5); return ( <Host style={{ flex: 1 }}> <Slider value={value} onValueChange={setValue} /> </Host> ); }
带自定义范围的分步滑块
使用 min、max 和 step 来限制滑块生成的值。
import { useState } from 'react'; import { Host, Column, Slider, Text } from '@expo/ui'; export default function SteppedSliderExample() { const [volume, setVolume] = useState(50); return ( <Host style={{ flex: 1 }}> <Column spacing={8}> <Text>音量：{volume}</Text> <Slider value={volume} onValueChange={setVolume} min={0} max={100} step={10} /> </Column> </Host> ); }
API
import { Slider } from '@expo/ui';
Component
Type: React.Element<SliderProps>
A control for selecting a value from a continuous or stepped range.
Props for the Slider component.
booleanWhether the slider is disabled. Disabled sliders do not respond to user interaction.
ModifierConfig[]Platform-specific modifier escape hatch. Pass an array of modifier configs
from @expo/ui/swift-ui/modifiers or @expo/ui/jetpack-compose/modifiers.
(value: number) => voidCalled when the user changes the slider value.
numberIncrement size. For example, step={10} with min={0} and max={100} produces values 0, 10, 20, …, 100.
stringIdentifier used to locate the component in end-to-end tests.