八、Slider组件

最新推荐文章于 2025-03-26 15:09:52 发布

清紫悠悠

最新推荐文章于 2025-03-26 15:09:52 发布

阅读量445

点赞数

文章标签： react native react.js javascript

本文链接：https://blog.csdn.net/qq_36833171/article/details/121183214

版权

本文档介绍了如何安装和使用@react-native-community/slider组件。通过执行yarn或npm命令安装模块，并在iOS项目中运行pod install。从react-native核心模块迁移到社区模块，需要更新导入语句。示例展示了如何创建一个滑块，包括设置滑块的样式、范围、步进值、颜色以及响应滑动事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Slider组件

参考文档：https://github.com/callstack/react-native-slider

Installation & Usage

To install this module cd to your project directory and enter the following command:

yarn add @react-native-community/slider

npm install @react-native-community/slider --save

If using iOS please remember to install cocoapods by running: npx pod-install
For web support please use @react-native-community/slider@next

Migrating from the core `react-native` module

This module was created when the Slider was split out from the core of React Native.
To migrate to this module you need to follow the installation instructions above and then change you imports from:

import { Slider } from 'react-native';

to:

import Slider from '@react-native-community/slider';

实例

import React, {useState} from "react";
import { View, StyleSheet ,Text} from "react-native";
import Slider from "@react-native-community/slider";

const Index = () => {
  const [sliderValue,setSliderValue] = useState(0);
  return (
    <View>
      <Slider
        style={{ width: 200, height: 40 }}
        minimumValue={0}
        maximumValue={20}
        step={2}
        value={sliderValue}
        minimumTrackTintColor="blue"
        // maximumTrackTintColor="#000000"
        maximumTrackTintColor="grey"
        onValueChange={(value)=>{setSliderValue(value)}}
      />
      <Text>设置的值为：{sliderValue}</Text>
    </View>
  );
};
export default Index;