اشتراک گزاری پیام در 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 در پروژه.

import React, { Component } from 'react';
 
import { Platform, View, Text, StyleSheet, Share, TextInput, Button, Alert } from 'react-native';

import React, { Component } from 'react';

import { Platform, View, Text, StyleSheet, Share, TextInput, Button, Alert } from 'react-native';

2.ایجاد ()constructor در پروژه و ایجاد یک State به نام TextInputValueHolder برای نگه داشتن مقدار TextInput وارد شده.

constructor()
    {
        super();
 
        this.state = 
          { 
 
            TextInputValueHolder: ''
 
          }
    }

constructor()

{

super();

this.state =

{

TextInputValueHolder: ''

}

3.ایجاد یک تابع به نام ()ShareMessage . در این تابع ما کامپوننت Share API رو با استفاده از متد Share.share({ message : Your Message }) فراخوانی میکنیم.

ShareMessage=()=>
    {
            Share.share(
            {
                
              message: this.state.TextInputValueHolder.toString()
            
            }).then(result => console.log(result)).catch(errorMsg => console.log(errorMsg));
    }

ShareMessage=()=>

{

Share.share(

{

message: this.state.TextInputValueHolder.toString()

}).then(result => console.log(result)).catch(errorMsg => console.log(errorMsg));

}

4.اضافه کردن View در بلاک render’s return

render()
    {
        return(
 
          <View style = { styles.MainContainer }>
 
              
 
          </View>
        
      );
    }

render()

{

return(

</View>

);

}

5.اضافه کردن کامپوننت های TextInput و Button درون View.مقدار تایپ شده در TextInput درون state ذخیره میشه و در رویداد onPress دکمه تابع ()ShareMessage فراخوانی میشه.

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

render()

{

return(

<TextInput

underlineColorAndroid = "transparent"

placeholder="Enter Text Here To Share"

style = { styles.TextInputStyle }

onChangeText = { ( TextInputText ) => { this.setState({ TextInputValueHolder: TextInputText })} }

</View>

);

}

6.ایجاد استایل سفارشی

const styles = StyleSheet.create(
{  
    MainContainer:
    {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop: (Platform.OS === 'ios') ? 20 : 0,
        margin:10
    },
 
    TextInputStyle:
    {
        borderWidth: 1,
        borderColor: '#009688',
        width: '100%',
        height: 40,
        borderRadius: 10,
        marginBottom: 10,
        textAlign: 'center'
    }
});

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

import React, { Component } from 'react';
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/%da%86%da%af%d9%88%d9%86%d9%87-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-react-native-%d8%b1%d9%88-%d8%b1%d9%88%db%8c-%d9%85%d9%88%d8%a8%d8%a7%db%8c%d9%84-%d8%aa%d8%b3%d8%aa-%d9%88/" 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/Testing-react-native-app-in-device-300x142.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 رو روی موبایل تست و اجرا کنیم</div></div></div><div class="ctaButton"></div></div></a></div> 
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 : 0,
        margin:10
    },
 
    TextInputStyle:
    {
        borderWidth: 1,
        borderColor: '#009688',
        width: '100%',
        height: 40,
        borderRadius: 10,
        marginBottom: 10,
        textAlign: 'center'
    }
});

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(

<TextInput

underlineColorAndroid = "transparent"

placeholder="Enter Text Here To Share"

style = { styles.TextInputStyle }

onChangeText = { ( TextInputText ) => { this.setState({ TextInputValueHolder: TextInputText })} }

</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:

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

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

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

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

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

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