اشتراک گزاری پیام در react native


سلام دوستان.در این آموزش متنی قصد داریم یاد بگیریم که چجوری هر محتوایی رو در React Native با استفاده از Share API به اشتراک بگزاریم.Share API به ما یک پلتفرم برای اشتراک گزاری محتوا بین اپلیکیشن های دیگه میده.ما میتونیم محتوا رو مستقیم از اپلیکیشنمون بین اپلیکیشن های دیگه مثل What’s App contacts, Hike Contacts, Groups, SMS, Copy to Clipboard, Share to Google drive, Memo, Bluetooth, Add to OneNote, Email, Gmail, Hangouts و One Drive و هر اپلیکیشن دیگه ای که بر روی گوشی نصب داشته باشیم به اشتراک بزاریم.
1.ایمپورت کردن کامپوننت های Platform, View, Text, StyleSheet, Share, TextInput و Button در پروژه.
1 2 3 |
import React, { Component } from 'react'; import { Platform, View, Text, StyleSheet, Share, TextInput, Button, Alert } from 'react-native'; |
2.ایجاد ()constructor در پروژه و ایجاد یک State به نام TextInputValueHolder برای نگه داشتن مقدار TextInput وارد شده.
1 2 3 4 5 6 7 8 9 10 11 |
constructor() { super(); this.state = { TextInputValueHolder: '' } } |
3.ایجاد یک تابع به نام ()ShareMessage . در این تابع ما کامپوننت Share API رو با استفاده از متد Share.share({ message : Your Message }) فراخوانی میکنیم.
1 2 3 4 5 6 7 8 9 |
ShareMessage=()=> { Share.share( { message: this.state.TextInputValueHolder.toString() }).then(result => console.log(result)).catch(errorMsg => console.log(errorMsg)); } |
4.اضافه کردن View در بلاک render’s return
1 2 3 4 5 6 7 8 9 10 11 12 |
render() { return( <View style = { styles.MainContainer }> </View> ); } |
5.اضافه کردن کامپوننت های TextInput و Button درون View.مقدار تایپ شده در TextInput درون state ذخیره میشه و در رویداد onPress دکمه تابع ()ShareMessage فراخوانی میشه.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
render() { return( <View style = { styles.MainContainer }> <TextInput underlineColorAndroid = "transparent" placeholder="Enter Text Here To Share" style = { styles.TextInputStyle } onChangeText = { ( TextInputText ) => { this.setState({ TextInputValueHolder: TextInputText })} } /> <Button title="Click Here To Share TextInput Inside Typed Text as Message" onPress={ this.ShareMessage } /> </View> ); } |
6.ایجاد استایل سفارشی
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const styles = StyleSheet.create( { MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingTop: (Platform.OS === 'ios') ? 20 : , margin:10 }, TextInputStyle: { borderWidth: 1, borderColor: '#009688', width: '100%', height: 40, borderRadius: 10, marginBottom: 10, textAlign: 'center' } }); |
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 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 60 61 62 63 64 65 66 67 68 69 70 71 72 |
import React, { Component } from 'react'; import { Platform, View, Text, StyleSheet, Share, TextInput, Button, Alert } from 'react-native'; export default class Myapp extends Component<{}> { constructor() { super(); this.state = { TextInputValueHolder: '' } } ShareMessage=()=> { Share.share( { message: this.state.TextInputValueHolder.toString() }).then(result => console.log(result)).catch(errorMsg => console.log(errorMsg)); } render() { return( <View style = { styles.MainContainer }> <TextInput underlineColorAndroid = "transparent" placeholder="Enter Text Here To Share" style = { styles.TextInputStyle } onChangeText = { ( TextInputText ) => { this.setState({ TextInputValueHolder: TextInputText })} } /> <Button title="Click Here To Share TextInput Inside Typed Text as Message" onPress={ this.ShareMessage } /> </View> ); } } const styles = StyleSheet.create( { MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingTop: (Platform.OS === 'ios') ? 20 : , margin:10 }, TextInputStyle: { borderWidth: 1, borderColor: '#009688', width: '100%', height: 40, borderRadius: 10, marginBottom: 10, textAlign: 'center' } }); |
اسکرین شات در نسخه اندروید:
اسکرین شات در نسخه Ios:
دیدگاهتان را بنویسید