資料結構
網路
關係型資料庫管理系統
作業系統
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 次檢視
