数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究在 Snack 中使用滑块示例
有时，任务是在给定范围内递增一个数字。为此，可以使用不同类型的滑块。不同的库允许在移动应用程序中使用滑块。本文展示了 React Native 和 Javascript 代码，其中包含两个不同的示例，第一个示例使用“@react-native-community/slider”组件“Slider”。在另一个示例中，使用“rn-arc-slider”中的圆形滑块 ArcSlider 来制作滑块，然后将其渲染到设备的屏幕上。
示例 1：使用来自“react-native-community/slider”的 Slider 打印数字的乘法表。
算法
步骤 1 − 从“react-native”导入 Text、View、StyleSheet。还从“@react-native-community/slider”导入 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 视图会默认选中，结果会立即显示。
示例 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,
},
});
输出
结果将在线显示。当用户在代码中输入时，Web 视图会默认选中，结果会立即显示。
Img：使用 Web 视图显示 ArcSlider。
img：在个人手机上显示 ArcSlider
本文通过两个示例描述了 Expo Snack 上不同形式的滑块。首先，给出了制作水平滑块并使用它显示数字乘法表的方法。下一个示例介绍了制作名为 ArcSlider 的圆形滑块的方法，并展示了在线 Web 视图和个人移动设备上的输出。
328 次查看
