Seekbar Slider در react native


سلام دوستان.دراین آموزش متنی قصد داریم یاد بگیریم که چجوری یک Seekbar Slider در ReactNative ایجاد کنیم.Slider که با Seekbar نیز شناخته میشه برای دریافت یک مقدار از طیف وسیعی از مقادیر در هر دو پلتفرم Android و Ios مورد استفاده قرار میگیره.Slider معمولا در اپلیکیشن ها برای تنظیم صدا، روشنایی صفحه، نوتیفیکیشن و … استفاده میشه.در این آموزش متنی ما یک Slider ساده طراحی میکنیم.
1.ساخت یک پروژه جدید.اگه نمیدونید چطور اینکارو بکنید،پیشنهاد میکنم دوره آموزش مقدماتی react native رو ببینید(برای مک هم میتونید مقاله آموزش نصب react native بر روی مک رو مطالعه کنید.
2.اضافه کردن کامپوننت های AppRegistry, StyleSheet, Text, View, Slider در بلاک import
1 2 3 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Slider} from 'react-native'; |
3.ایجاد سازنده ()constructor در کلاس اصلی با متد() super . تعریف یک متغیر به نام SliderValue با استفاده از State
1 2 3 4 5 6 7 8 9 10 |
constructor(){ super(); this.state ={ SliderValue : } } |
4.اضافه کردن کامپوننت View در بلاک render’s return و قرار دادن یک کامپوننت Text برای نمایش مقدار SliderValue .
1 2 3 4 5 |
<View style={styles.MainContainer}> <Text style = {{fontSize: 20}}>Slider Value = { this.state.SliderValue }</Text> </View> |
5.اضافه کردن کامپوننت Slider بعد از کامپوننت Text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<View style={styles.MainContainer}> <Text style = {{fontSize: 20}}>Slider Value = { this.state.SliderValue }</Text> <Slider step = { 1 } minimumValue = { } maximumValue = { 100 } minimumTrackTintColor = "#009688" onValueChange={(ChangedValue) => this.setState({ SliderValue: ChangedValue })} style = {{ width: '100%' }} /> </View> |
6.ایجاد استایل سفارشی
1 2 3 4 5 6 7 8 9 10 11 12 |
const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', alignItems: 'center', flex:1, margin: 10 } }); |
7.کد کامل برنامه در فایل index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Slider} from 'react-native'; class Project extends Component { constructor(){ super(); this.state ={ SliderValue : } } render() { return ( <View style={styles.MainContainer}> <Text style = {{fontSize: 20}}>Slider Value = { this.state.SliderValue }</Text> <Slider step = { 1 } minimumValue = { } maximumValue = { 100 } minimumTrackTintColor = "#009688" onValueChange={(ChangedValue) => this.setState({ SliderValue: ChangedValue })} style = {{ width: '100%' }} /> </View> ); } } const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', alignItems: 'center', flex:1, margin: 10 } }); AppRegistry.registerComponent('Project', () => Project); |
اسکرین شات:
دیدگاهتان را بنویسید