在 Snack 中使用滑块示例

有时，任务是在给定范围内递增一个数字。为此，可以使用不同类型的滑块。不同的库允许在移动应用中使用滑块。本文介绍了使用 React Native 和 JavaScript 代码的两个不同示例，其中第一个示例使用了 “@react-native-community/slider” 组件 “Slider”。另一个示例使用了 “rn-arc-slider” 中的圆形滑块 ArcSlider 来制作滑块，然后将其呈现在设备屏幕上。

示例 1：使用来自 ‘react-native-community/slider’ 的滑块打印一个数字的表

步骤

步骤 1 - 从 ‘react-native’ 中导入 Text、View、StyleSheet。还要导入 Slider 来自 ‘@react-native-community/slider’。
步骤 2 - 创建 App.js 并编写代码。
步骤 3 - 创建一个类并编写构造函数，其中包括一个映射器的状态变量。滑块的值可以用于某些任务，比如打印一个数字的表。
步骤 4 - 编写一个函数来递增或更改映射器的值。
步骤 5 - 制作滑块并指定最小值和最大值，并使用函数来更改值。
步骤 6 - 检查结果。

项目中使用的重要文件

App.js

App.js：这是该项目的主要 JavaScript 文件。

示例

import { Component } from 'react';
import { Text, View, StyleSheet} from 'react-native';
import Slider from '@react-native-community/slider';

var maxvalforslider= 50;

export default class TableShowWithSliderApp extends Component {
   constructor(props) {
      super(props);
      this.state = {
         mapper:0,
         tableOf:3
      }
   }
   componentDidMount() {
      setInterval(this.incrementmapper,1000);
   }
   incrementmapper = () => {
      if (this.state.mapper < maxvalforslider)
      this.setState({ mapper: this.state.mapper +1 });
   }
   render() {
      return (
         <View>
            <Text style={styles.textSty}>Showing Multiples of A Number</Text>
            <Textstyle={{color: "#A00", marginTop: 10, padding :10}}>Start of Slider Value: 0</Text>
            <Text style={{color: "#00A", marginTop: 10, padding :10}}>End of Slider Value: {maxvalforslider}</Text>

            <Slider
            style={{width: 300, height: 40}}
            value={this.state.mapper}
            onValueChange={mapper => this.setState({mapper})}
            minimumValue={0}
            maximumValue={maxvalforslider}
            minimumTrackTintColor="#CCC"
            maximumTrackTintColor="#000"
            step={1}

            />
            <Text style={styles.textSty}>{"Table of : " +   this.state.tableOf}
            </Text>
            <Text style={{color: "#000", fontSize: 30, marginTop: 10, padding :10}}>{ this.state.tableOf +"*" + + this.state.mapper+ "=" + this.state.mapper *this.state.tableOf }</Text>

         </View>
      );
   }
}
const styles = StyleSheet.create({
   textSty: {
      textAlign: 'center',
      fontSize: 20,
      padding:10,
      marginTop: 20,
   },
});

输出

当用户输入代码时，默认选择Web视图，结果立即显示。

在 Snack 中使用滑块示例

示例2：使用”rn-arc-slider”中的ArcSlider打印一个数字的表格。

步骤

步骤1 – 从’react-native’导入Text、View、StyleSheet、SafeAreaView以及从”rn-arc-slider”导入ArcSlider。
步骤2 – 创建App.js并编写代码。
步骤3 – 创建一个类并编写构造函数，包括映射器的状态变量。ArcSlider的值可以用于一些任务，比如打印一个数字的表格。
步骤4 – 编写函数以增加或更改映射器的值。
步骤5 – 创建ArcSlider，并指定showThumbText、showText、minvalue和maxvalue，并使用函数来更改值。
步骤6 – 检查结果。

该项目中使用的重要文件为

App.js

App.js：这是该项目的主要JavaScript文件。

示例

import { Component } from 'react'
import {View, Text, SafeAreaView, StyleSheet} from 'react-native';
import ArcSlider from "rn-arc-slider";

var maxvalforslider= 50;
export default class CircularSliderApp extends Component {
   constructor(props) {
      super(props);
      this.state = {
         mapper:0,
         tableOf:3
      }
   }
   componentDidMount() {
      setInterval(this.incrementmapper,1000);
   }

   incrementmapper = () => {
      if (this.state.mapper < maxvalforslider)
         this.setState({ mapper: this.state.mapper +1 });
   }
   render() {
      return (
         <SafeAreaView style={{flex: 1}}>
            <View>
               <Text style={styles.textSty}>Showing Multiples of A Number</Text>
               <Textstyle={{color: "#A00", marginTop: 10, padding :10}}>Start of Slider Value: 0</Text>
               <Text style={{color: "#00A", marginTop: 10, padding :10}}>End of Slider Value: {maxvalforslider}</Text>

               <ArcSlider
               value={this.state.mapper}
               onValueChange={mapper => this.setState({mapper})}
               trackColor={"red"}
               minValue={0}
               maxValue={maxvalforslider}
               showThumbText
               showText
               textColor="white"
               />
                <Text style={styles.textSty}>
                  {"Table of : " + this.state.tableOf}
               </Text>
               <Text style={{color: "#000", fontSize: 30, marginTop: 10, padding :10}}>{ this.state.tableOf +"*" + + this.state.mapper+ "=" + this.state.mapper *this.state.tableOf }</Text>

            </View>
         </SafeAreaView>
      );
   }
}
const styles = StyleSheet.create({
   textSty: {
      textAlign: 'center',
      fontSize: 20,
      padding:10,
      marginTop: 20,
   },
});