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

در این قسمت قصد داریم توسط کتابخونه react-native-sketch-canvas یک اپلیکیشن نقاشی ساده درست کنیم خروجی این اپلیکیشن به نحوی خواهد بود که با کشیدن انگشت روی صفحه یک خط قرمز رنگ کشیده میشود.

ابتدا cmd را در محل پوشه پروژه باز کرده و دستور زیر را برای نصب این کتابخونه اجرا میکنیم:

npm install @terrylinla/react-native-sketch-canvas --save

1	npm install @terrylinla/react-native-sketch-canvas --save

بعد از نصب کامل آن را لینک میکنیم:

react-native link @terrylinla/react-native-sketch-canvas

1	react-native link @terrylinla/react-native-sketch-canvas

و در نهایت از دستور زیر برای نصب پکیج ها استفاده میکنیم:

react-native run-android

1	react-native run-android

خب نوبت به استفاده این کتابخونه شده.وارد فایل app.js شده و react و کامپوننت هایه مورد استفاده رو فراخانی میکنیم:

import React, { Component } from 'react';
import {
  View,
} from 'react-native';

import React, { Component } from 'react';

import {

View,

} from 'react-native';

سپس کامپوننت SketchCanvas از کتابخونه @terrylinla/react-native-sketch-canvas رو به همین شکل:

import { SketchCanvas } from '@terrylinla/react-native-sketch-canvas';

1	import { SketchCanvas } from '@terrylinla/react-native-sketch-canvas';

کلاس App خود را ساخته و برای آن دو View تعریف میکنیم.

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

export default class APP extends Component {

render() {

return (

</View>

);

}

حالا نوبت اون شده تا از کامپوننت SketchCanvas درون View فرزند استفاده کنیم و یک رنگ قرمز برای رنگ مدادمون و عرض 7 برای اندازه مداد تعریف کنیم:

اضافه کردن Floating Action Button در react native

<SketchCanvas
  style={{ flex: 1 }}
  strokeColor={'red'}
  strokeWidth={7}
/>

<SketchCanvas

style={{ flex: 1 }}

strokeColor={'red'}

strokeWidth={7}

خب اپ ما درست شد و میتونیم نقاشی رو شروع کنیم.

کد کامل App.js

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

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 (

<SketchCanvas

style={{ flex: 1 }}

strokeColor={'red'}

strokeWidth={7}

</View>

);

}

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

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

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

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

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

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

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

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

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