گرفتن Screenshot در React Native
سلام دوستان. در این تله آموزش متنی قصد داریم یاد بگیریم چجوری در React Native اسکرین شات بگیریم.اسکرین شات(Screenshot) یک فایل گرافیکی است که پرونده فعلی باز روی صفحه رو در قالب یک فایل تصویری رسانه ای با فرمت JPG یا PNG ذخیره میکند.گرفتن snapshots یک روش بسیار مهم برای فرآیندهایی مثل رزرو بلیط آنلاین،رزرو آنلاین هتل و … است که توسعه دهنده میتواند این اختیار را به کاربر بدهد تا از بلیط و اطلاعات خود به راحتی screenshot بگیرد.در این آموزش من از کتابخانه react-native-view-shot استفاده میکنم که در هر دو پلتفرم Android و Ios قابل استفاده است.
1.دایرکتوری پروژه React Native خود را در Command Prompt باز کنید و دستور زیر رو برای نصب کتابخانه react-native-view-sho اجرا کنید.
|
1 |
npm install react-native-view-shot |
2.بعد از نصب موفقیت آمیز کتابخانه ما باید از دستور زیر برای قرارگرفتن در فهرست کامپایل پروژه استفاده کنیم.
|
1 |
react-native link react-native-view-shot |
3.ایمپورت کردن کتابخانه های tyleSheet, Text, View, Image, Button و Platform در پروژه.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, Image, Button, Platform } from 'react-native'; |
4.ایمپورت کردن ماژول captureScreen از کتابخانه react-native-view-shot.
|
1 |
import { captureScreen } from "react-native-view-shot"; |
5.ایجاد ()constructor در کلاس اصلی و تعریف یک State به نام imageURI . با استفاده از این state ما image URI رو بعد از گرفتن screenshot نگه میداریم.
|
1 2 3 4 5 6 7 8 9 10 |
constructor(){ super(); this.state={ imageURI : 'https://reactapp.ir/wp-content/uploads/motorcycle.jpg' } } |
6.ایجاد یک تابع به نام ()captureScreenFunction . درون این تابع ما از متد ()captureScreen استفاده میکنیم که بصورت پیشفرض در کتابخانه وجود دارد.همچنین ما imageURI رو با استفاده از screenshot UR به روزرسانی میکنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
captureScreenFunction=()=>{ captureScreen({ format: "jpg", quality: 0.8 }) .then( uri => this.setState({ imageURI : uri }), error => console.error("Oops, Something Went Wrong", error) ); } |
8.اضافه کردن کامپوننت View درون بلاک render’s return. درون View اصلی از دو کامپوننت Button و Image استفاده میکنیم.ما source عکس رو با استفاده از Image URI تنظیم میکنیم،بنابراین وقتی که کاربر بر روی Button کلیک میکند و از صفحه screenshot میگیرد Image URI بروز رسانی میشود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
render() { return ( <View style={styles.MainContainer}> <Button title="Capture Device Screenshot" onPress={this.captureScreenFunction} /> <Image source={{uri : this.state.imageURI}} style={{width: 200, height: 300, resizeMode: 'contain', marginTop: 5}} /> </View> ); } |
9.ایجاد استایل
|
1 2 3 4 5 6 7 8 9 10 11 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff', borderWidth: 1, borderColor: '#000', marginTop: (Platform.OS) === 'ios' ? 20 : 0, } }); |
10.کد کامل برنامه در فایل App.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 54 55 56 57 58 59 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, Image, Button, Platform } from 'react-native'; import { captureScreen } from "react-native-view-shot"; export default class App extends Component { constructor(){ super(); this.state={ imageURI : 'https://reactapp.ir/wp-content/uploads/motorcycle.jpg' } } captureScreenFunction=()=>{ captureScreen({ format: "jpg", quality: 0.8 }) .then( uri => this.setState({ imageURI : uri }), error => console.error("Oops, Something Went Wrong", error) ); } render() { return ( <View style={styles.MainContainer}> <Button title="Capture Device Screenshot" onPress={this.captureScreenFunction} /> <Image source={{uri : this.state.imageURI}} style={{width: 200, height: 300, resizeMode: 'contain', marginTop: 5}} /> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff', borderWidth: 1, borderColor: '#000', marginTop: (Platform.OS) === 'ios' ? 20 : 0, } }); |
اسکرین شات در نسخه Android:
اسکرین شات در نسخه Ios:
دیدگاهتان را بنویسید