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

import React, { Component } from 'react';
 
import { AppRegistry, StyleSheet, Text, View, Slider} from 'react-native';

import React, { Component } from 'react';

import { AppRegistry, StyleSheet, Text, View, Slider} from 'react-native';

3.ایجاد سازنده ()constructor در کلاس اصلی با متد() super . تعریف یک متغیر به نام SliderValue با استفاده از State

constructor(){
 
   super();
 
   this.state ={
 
    SliderValue :  0
 
   }
 }

constructor(){

super();

this.state ={

SliderValue :

}

4.اضافه کردن کامپوننت View در بلاک render’s return و قرار دادن یک کامپوننت Text برای نمایش مقدار SliderValue .

<View style={styles.MainContainer}>
 
        <Text style = {{fontSize: 20}}>Slider Value = { this.state.SliderValue }</Text>
 
</View>

<Text style = {{fontSize: 20}}>Slider Value = { this.state.SliderValue }</Text>

</View>

5.اضافه کردن کامپوننت Slider بعد از کامپوننت Text

<View style={styles.MainContainer}>
 
        <Text style = {{fontSize: 20}}>Slider Value = { this.state.SliderValue }</Text>
 
        <Slider
          step = { 1 }
          minimumValue = { 0 }
          maximumValue = { 100 }
          minimumTrackTintColor = "#009688"
          onValueChange={(ChangedValue) => this.setState({ SliderValue: ChangedValue })}
          style = {{ width: '100%' }} 
          />
 
     </View>

<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.ایجاد استایل سفارشی

گرفتن Current Location در React Native

const styles = StyleSheet.create({
 
MainContainer :{
 
justifyContent: 'center',
alignItems: 'center',
flex:1,
margin: 10
 
}
 
});

const styles = StyleSheet.create({

MainContainer :{

justifyContent: 'center',

alignItems: 'center',

flex:1,

margin: 10

}

});

7.کد کامل برنامه در فایل index.js

import React, { Component } from 'react';
 
import { AppRegistry, StyleSheet, Text, View, Slider} from 'react-native';
 
class Project extends Component {
 
 constructor(){
 
   super();
 
   this.state ={
 
    SliderValue :  0
 
   }
 }
 
 render() {
 
   return (
 
     <View style={styles.MainContainer}>
 
        <Text style = {{fontSize: 20}}>Slider Value = { this.state.SliderValue }</Text>
 
        <Slider
          step = { 1 }
          minimumValue = { 0 }
          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);

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 (

<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);

اسکرین شات:

Seekbar Slider در react native

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

دیدگاهتان را بنویسید لغو پاسخ