推荐使用:React Native滑块组件 —— `react-native-slider`
react-native-slider
是一个在 React Native 应用程序中实现滑块组件的库。以下是如何使用它的示例代码:
首先,你需要安装这个库:
npm install react-native-slider
然后,你可以在你的代码中这样使用它:
import React from 'react';
import { StyleSheet, View } from 'react-native';
import Slider from 'react-native-slider';
const App = () => {
const [value, setValue] = React.useState(50);
return (
<View style={styles.container}>
<Slider
style={styles.slider}
minimumValue={0}
maximumValue={100}
value={value}
onValueChange={setValue}
/>
<Text>{value}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
slider: {
width: '80%',
marginVertical: 10,
},
});
export default App;
在这个例子中,Slider
组件被用于让用户在 0 到 100 的范围内选择一个值。value
状态变量存储当前滑块的值,并在滑动时更新。onValueChange
回调用于更新 value
状态。
评论已关闭