آموزش React Native-کتابخانه react-native-indicators

خیلی وقتا وقتی میخوام اپلیکیشن خودمون کد نویسی کنیم در قسمت indicators به مشکل میخورم چراکه indicators هایه کتابخونه React Native خیلی ساده هستن , اما با استفاده از کتابخانه react-native-indicators میتونیم از indicators های آماده استفاده و خیلی راحت اونارو سفارشی کنم.

ابتدا این کتابخونه رو نصب میکنیم:

npm install --save react-native-indicators

1	npm install --save react-native-indicators

نوبت به ساخت indicators رسیده. باید بگم این کتابخونه شامل کامپوننت هایه زیره و قراره خواص (properties) هر کامپوننت رو بطور جداگانه با ذکر مثال توضیح بدم.

BallIndicator:

BallIndicator properties

نام پروپرتی	توضیحات	نوع	مقدار پیش فرض
color	رنگ کامپوننت	String	(rgb(0, 0, 0
count	مقدار دایره هایه کامپوننت	Number	8
size	اندازه کامپوننت	Number	40

مثال: (app.js)

import React, { Component } from 'react';
import {
  BallIndicator,
} from "react-native-indicators";

export default class App extends Component {
  render() {
    return (
    <BallIndicator color="blue" count={12} size={80}/>
    )
  }
}

import React, { Component } from 'react';

import {

BallIndicator,

} from "react-native-indicators";

export default class App extends Component {

render() {

return (

)

}

2. BarIndicator:

BarIndicator properties

نام پروپرتی	توضیحات	نوع	مقدار پیش فرض
color	رنگ کامپوننت	String	(rgb(0, 0, 0
count	تعداد خطوط کامپوننت	Number	3
size	اندازه کامپوننت	Number	40

مثال: (app.js)

import React, { Component } from 'react';
import {
  BarIndicator,
} from "react-native-indicators";

export default class App extends Component {
  render() {
    return (
        <BarIndicator color="blue" count={8} size={60}/>
    )
  }
}

import React, { Component } from 'react';

import {

BarIndicator,

} from "react-native-indicators";

export default class App extends Component {

render() {

return (

)

}

3. DotIndicator:

DotIndicator properties

نام پروپرتی	توضیحات	نوع	مقدار پیش فرض
color	رنگ کامپوننت	String	(rgb(0, 0, 0
count	مقدار دایره هایه کامپوننت	Number	4
size	اندازه کامپوننت	Number	16

مثال: (app.js)

import React, { Component } from 'react';
import {
  DotIndicator,
} from "react-native-indicators";

export default class App extends Component {
  render() {
    return (
        <DotIndicator color="blue" count={6} size={18}/>
    )
  }
}

import React, { Component } from 'react';

import {

DotIndicator,

} from "react-native-indicators";

export default class App extends Component {

render() {

return (

)

}

4. MaterialIndicator:

MaterialIndicator properties

نام پروپرتی	توضیحات	نوع	مقدار پیش فرض
color	رنگ کامپوننت	String	(rgb(0, 0, 0
size	اندازه کامپوننت	Number	40

مثال: (app.js)

import React, { Component } from 'react';
import {
  MaterialIndicator,
} from "react-native-indicators";

export default class App extends Component {
  render() {
    return (
        <MaterialIndicator color="blue" size={60}/>
    )
  }
}

import React, { Component } from 'react';

import {

MaterialIndicator,

} from "react-native-indicators";

export default class App extends Component {

render() {

return (

)

}

5. PacmanIndicator:

PacmanIndicator properties

نام پروپرتی	توضیحات	نوع	مقدار پیش فرض
color	رنگ کامپوننت	String	(rgb(0, 0, 0
size	اندازه کامپوننت	Number	48

مثال: (app.js)

import React, { Component } from 'react';
import {
  PacmanIndicator,
} from "react-native-indicators";

export default class App extends Component {
  render() {
    return (
        <PacmanIndicator color="blue" size={100}/>
    )
  }
}

import React, { Component } from 'react';

import {

PacmanIndicator,

} from "react-native-indicators";

export default class App extends Component {

render() {

return (

)

}

6. PulseIndicator:

PulseIndicator properties

نام پروپرتی	توضیحات	نوع	مقدار پیش فرض
color	رنگ کامپوننت	String	(rgb(0, 0, 0
size	اندازه کامپوننت	Number	40

مثال: (app.js)

import React, { Component } from 'react';
import {
  PulseIndicator ,
} from "react-native-indicators";
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/custom-radio-button-group-component/" target="_blank" class="IRPP_ruby"><!-- INLINE RELATED POSTS 1/1 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #34495E; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #3498DB; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://reactapp.ir/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div data-bg="https://reactapp.ir/wp-content/uploads/Oct_Articles_01_Top-ReactNative-Apps-300x162.png" class="postImageUrl rocket-lazyload" style=""></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText"></div><div style="clear:both"></div><div class="postTitle">آموزش React Native - ایجاد Radio Button</div></div></div><div class="ctaButton"></div></div></a></div>
export default class App extends Component {
  render() {
    return (
        <PulseIndicator  color="blue" size={100}/>
    )
  }
}

import React, { Component } from 'react';

import {

PulseIndicator ,

} from "react-native-indicators";

export default class App extends Component {

render() {

return (

)

}

7. SkypeIndicator:

SkypeIndicator properties

نام پروپرتی	توضیحات	نوع	مقدار پیش فرض
color	رنگ کامپوننت	String	(rgb(0, 0, 0
count	مقدار دایره های کامپوننت	Number	5
size	اندازه کامپوننت	Number	40
minScale	اندازه چوچک ترین دایره	Number	0.2
maxScale	اندازه بزرگ ترین دایره	Number	1.0

نکته: در minScale رنج اعداد از 1- تا 2 است و هرچه به دو نزدیک تر اندازه دایره بیشتر میشود.

نکته: برای maxScale رنج اعداد از 9- تا 1 است و هرچه به یک نزدیک تر اندازه دایره کوچک تر میشود.

مثال: (app.js)

import React, { Component } from 'react';
import {
  SkypeIndicator,
} from "react-native-indicators";

export default class App extends Component {
  render() {
    return (
        <SkypeIndicator color="blue" count={6} size={100} minScale={0.1} maxScale={1.6}/>
    )
  }
}

import React, { Component } from 'react';

import {

SkypeIndicator,

} from "react-native-indicators";

export default class App extends Component {

render() {

return (

)

}

8. UIActivityIndicator:

UIActivityIndicator properties

نام پروپرتی	توضیحات	نوع	مقدار پیش فرض
color	رنگ کامپوننت	String	(rgb(0, 0, 0
count	مقدار خطوط کامپوننت	Number	12
size	اندازه کامپوننت	Number	40

مثال: (app.js)

import React, { Component } from 'react';
import {
  UIActivityIndicator   ,
} from "react-native-indicators";

export default class App extends Component {
  render() {
    return (
        <UIActivityIndicator color="blue" count={18} size={100}/>
    )
  }
}

import React, { Component } from 'react';

import {

UIActivityIndicator ,

} from "react-native-indicators";

export default class App extends Component {

render() {

return (

)

}

9. WaveIndicator:

WaveIndicator properties

نام پروپرتی	توضیحات	نوع	مقدار پیش فرض
color	رنگ کامپوننت	String	(rgb(0, 0, 0
count	مقدار دایره های کامپوننت	Number	4
size	اندازه کامپوننت	Number	40
waveFactor	سرعت حرکت انیمیشن	Number	0.54
waveMode	نوع انیمیشن	String	fill

نکته: در waveFactor رنج اعداد از یک تا صفراست و هرچه به یک نزدیک تر سرعت انیمیشن کمترمیشود.

نکته: برای waveMode دو مقدار fill و outline قابل استفاده است.

مثال: (app.js)

import React, { Component } from 'react';
import {
  WaveIndicator,
} from "react-native-indicators";

export default class App extends Component {
  render() {
    return (
        <WaveIndicator color="blue" count={10} size={100} waveFactor={0.1} waveMode="fill"/>
    )
  }
}

import React, { Component } from 'react';

import {

WaveIndicator,

} from "react-native-indicators";

export default class App extends Component {

render() {

return (

)

}

مثال: (app.js)

import React, { Component } from 'react';
import {
  WaveIndicator,
} from "react-native-indicators";

export default class App extends Component {
  render() {
    return (
        <WaveIndicator color="blue" count={10} size={100} waveFactor={0.1} waveMode="outline"/>
    )
  }
}

import React, { Component } from 'react';

import {

WaveIndicator,

} from "react-native-indicators";

export default class App extends Component {

render() {

return (

)

}

کامپوننت ها به پایان رسید اما باید بیان کنم یک سری خواص (properties) وجود داره که برای همه این کامپوننت ها مشترک هست که شامل:

Common properties

نام پروپرتی	توضیحات	نوع	مقدار پیش فرض
animationEasing	نوع انیمیشن	Function	Easing.linear
animationDuration	سرعت پخش انیمیشن	Number	1200
animating	انیمیشن داشته باشه یا نه	Boolean	true

آموزش React Native-کتابخانه react-native-indicators

BallIndicator:

2. BarIndicator:

3. DotIndicator:

4. MaterialIndicator:

5. PacmanIndicator:

6. PulseIndicator:

7. SkypeIndicator:

8. UIActivityIndicator:

9. WaveIndicator:

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

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

BallIndicator:

2. BarIndicator:

3. DotIndicator:

4. MaterialIndicator:

5. PacmanIndicator:

6. PulseIndicator:

7. SkypeIndicator:

8. UIActivityIndicator:

9. WaveIndicator:

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

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

تفاوت توسعه برنامه های android و ios

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

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

نمایش PDF در react native

استفاده از Mapbox در react native (ری اکت نیتیو)

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