آموزش React Native – ساخت اپلیکیشن نقاشی ساده


در این قسمت قصد داریم توسط کتابخونه react-native-sketch-canvas یک اپلیکیشن نقاشی ساده درست کنیم خروجی این اپلیکیشن به نحوی خواهد بود که با کشیدن انگشت روی صفحه یک خط قرمز رنگ کشیده میشود.
ابتدا cmd را در محل پوشه پروژه باز کرده و دستور زیر را برای نصب این کتابخونه اجرا میکنیم:
1 |
npm install @terrylinla/react-native-sketch-canvas --save |
بعد از نصب کامل آن را لینک میکنیم:
1 |
react-native link @terrylinla/react-native-sketch-canvas |
و در نهایت از دستور زیر برای نصب پکیج ها استفاده میکنیم:
1 |
react-native run-android |
خب نوبت به استفاده این کتابخونه شده.وارد فایل app.js شده و react و کامپوننت هایه مورد استفاده رو فراخانی میکنیم:
1 2 3 4 |
import React, { Component } from 'react'; import { View, } from 'react-native'; |
سپس کامپوننت SketchCanvas از کتابخونه @terrylinla/react-native-sketch-canvas رو به همین شکل:
1 |
import { SketchCanvas } from '@terrylinla/react-native-sketch-canvas'; |
کلاس App خود را ساخته و برای آن دو View تعریف میکنیم.
1 2 3 4 5 6 7 8 9 10 11 |
export default class APP extends Component { render() { return ( <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF'}}> <View style={{ flex: 1, flexDirection: 'row' }}> </View> </View> ); } } |
حالا نوبت اون شده تا از کامپوننت SketchCanvas درون View فرزند استفاده کنیم و یک رنگ قرمز برای رنگ مدادمون و عرض 7 برای اندازه مداد تعریف کنیم:
1 2 3 4 5 |
<SketchCanvas style={{ flex: 1 }} strokeColor={'red'} strokeWidth={7} /> |
خب اپ ما درست شد و میتونیم نقاشی رو شروع کنیم.
کد کامل App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import React, { Component } from 'react'; import { View, } from 'react-native'; import { SketchCanvas } from '@terrylinla/react-native-sketch-canvas'; export default class APP extends Component { render() { return ( <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF'}}> <View style={{ flex: 1, flexDirection: 'row' }}> <SketchCanvas style={{ flex: 1 }} strokeColor={'red'} strokeWidth={7} /> </View> </View> ); } } |
دیدگاهتان را بنویسید