طراحی Material SnackBar در React Native

سلام دوستان.در این آموزش متنی قصد داریم یاد بگیریم چجوری یک Material SnackBar در React Native طراحی کنیم.SnackBar یک لایه سفارشی کشویی رو به بالا حاوی یک پیام متنی یک خطی با دکمه UNDO است که بصورت اتوماتیک بعد از مدتی پنهان میشه.SnackBar برای نمایش دادن بازخورد عملیات ها در گوشی های android استفاده میشه ولی ما میتونیم با React Native در هر دو گوشی های Android و IOS برای نمایش بازخورد استفاده کنیم.

1.ایمپورت کردن کامپوننت های AppRegistry, Animated, View, Platform, Button, Image, StyleSheet و Text در پروژه.

import React, { Component } from 'react';
 
import { AppRegistry, Animated, View, Platform, Button, Image, StyleSheet, Text } from 'react-native';

import React, { Component } from 'react';

import { AppRegistry, Animated, View, Platform, Button, Image, StyleSheet, Text } from 'react-native';

2.ایجاد یک کلاس جدید به نام MaterialDesignSnackBar در پروژه.

ما در این آموزش از کامپوننت Animated برای نمایش و پنهان کردن SnackBar استفاده میکنیم.

{
   constructor()
   {
      super();
 
      this.animatedValue = new Animated.Value(60);
 
      this.ShowSnackBar = false;
 
      this.HideSnackBar = true;
 
      this.state = { SnackBarInsideMsgHolder: '' };
   }
 
  ShowSnackBarFunction(SnackBarInsideMsgHolder="Default SnackBar Message...", duration=3000)
  {
    if( this.ShowSnackBar === false )
    {
      this.setState({ SnackBarInsideMsgHolder: SnackBarInsideMsgHolder });
 
      this.ShowSnackBar = true;
 
      Animated.timing
      (
          this.animatedValue,
          { 
              toValue: 0,
              duration: 350
          }
      ).start(this.hide(duration));
    }     
  }
 
    hide = (duration) =>
    {
      this.timerID = setTimeout(() =>
      {
        if(this.HideSnackBar === true)
        {
            this.HideSnackBar = false;
 
            Animated.timing
            (
              this.animatedValue,
              { 
                toValue: 60,
                duration: 350
              }
            ).start(() =>
            {
              this.HideSnackBar = true;
              this.ShowSnackBar = false;
 
              clearTimeout(this.timerID);
            })
        }
      }, duration); 
    }
 
    SnackBarCloseFunction = () =>
    {
      if(this.HideSnackBar === true)
      {
          this.HideSnackBar = false;
 
          clearTimeout(this.timerID);
 
          Animated.timing
          (
              this.animatedValue,
              { 
                toValue: 60,
                duration: 350
              }
          ).start(() =>
          {
              this.ShowSnackBar = false;
              this.HideSnackBar = true;
          });
      }
    }
 
    render()
    {
      return(
 
         <Animated.View style = {[{ transform: [{ translateY: this.animatedValue }]}, styles.SnackBarContainterView ]}>
 
 
            <Text numberOfLines = { 1 } style = { styles.SnackBarInsideTextStyle }>{ this.state.SnackBarInsideMsgHolder }</Text>
 
 
            <Text style = { styles.SnackBarUndoTextStyle} onPress = { this.SnackBarCloseFunction } > UNDO </Text>
 
 
         </Animated.View>
         
      );
    }

{

constructor()

{

super();

this.animatedValue = new Animated.Value(60);

this.ShowSnackBar = false;

this.HideSnackBar = true;

this.state = { SnackBarInsideMsgHolder: '' };

}

ShowSnackBarFunction(SnackBarInsideMsgHolder="Default SnackBar Message...", duration=3000)

{

if( this.ShowSnackBar === false )

{

this.setState({ SnackBarInsideMsgHolder: SnackBarInsideMsgHolder });

this.ShowSnackBar = true;

Animated.timing

(

this.animatedValue,

{

toValue: ,

duration: 350

}

).start(this.hide(duration));

}

hide = (duration) =>

{

this.timerID = setTimeout(() =>

{

if(this.HideSnackBar === true)

{

this.HideSnackBar = false;

Animated.timing

(

this.animatedValue,

{

toValue: 60,

duration: 350

}

).start(() =>

{

this.HideSnackBar = true;

this.ShowSnackBar = false;

clearTimeout(this.timerID);

})

}

}, duration);

}

SnackBarCloseFunction = () =>

{

if(this.HideSnackBar === true)

{

this.HideSnackBar = false;

clearTimeout(this.timerID);

Animated.timing

(

this.animatedValue,

{

toValue: 60,

duration: 350

}

).start(() =>

{

this.ShowSnackBar = false;

this.HideSnackBar = true;

});

}

render()

{

return(

<Animated.View style = {[{ transform: [{ translateY: this.animatedValue }]}, styles.SnackBarContainterView ]}>

<Text numberOfLines = { 1 } style = { styles.SnackBarInsideTextStyle }>{ this.state.SnackBarInsideMsgHolder }</Text>

</Animated.View>

);

}

3.ایجاد constructor در کلاس اصلی

constructor()
   {
      super();
   }

constructor()

{

super();

}

4.ایجاد یک تابع به نام DisplayMaterialDesignSnackBar .

در این تابع ما پیغام خودمون رو برای نمایش در SnackBar پاس میدیم.

DisplayMaterialDesignSnackBar = () =>
   {
      this.refs.ReactNativeCodeSnackBar.ShowSnackBarFunction("reactapp.ir");
   }

DisplayMaterialDesignSnackBar = () =>

{

this.refs.ReactNativeCodeSnackBar.ShowSnackBarFunction("reactapp.ir");

}

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

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

render()

{

return(

</View>

);

}

6.اضافه کردن کامپوننت Button درون View اصلی و فراخوانی تابع DisplayMaterialDesignSnackBar در رویداد onPress این button.

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

            <Button onPress = { this.DisplayMaterialDesignSnackBar } title=" Show Material Design SnackBar " >  </Button>


         </View>
      );
   }

render()

{

return(

</View>

);

}

7.ایجاد یک object از کلاس MaterialDesignSnackBar بعد از کامپوننت Button و پاس دادن یک props به نام ref = “ReactNativeCodeSnackBar” .

render()
   {
      return(
         <View style = { styles.MainContainer }>
 
            <Button onPress = { this.DisplayMaterialDesignSnackBar } title=" Show Material Design SnackBar " >  </Button>
 
            <MaterialDesignSnackBar ref = "ReactNativeCodeSnackBar"/>
 
         </View>
      );
   }

render()

{

return(

</View>

);

}

8.ایجاد استایل

const styles = StyleSheet.create(
{
  MainContainer:
  {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 20,
    paddingTop: (Platform.OS) === 'ios' ? 20 : 0
  },
 
  SnackBarContainterView:
  {
    position: 'absolute',
    backgroundColor: '#009688', 
    flexDirection: 'row',
    alignItems: 'center',
    left: 0,
    bottom: 0,
    right: 0,
    height: 60,
    paddingLeft: 10,
    paddingRight: 55
  },
 
  SnackBarInsideTextStyle:
  {
    color: '#fff',
    fontSize: 18
  },
 
  SnackBarUndoTextStyle:{
 
    color: '#FFEB3B',
    fontSize: 18,
    position: 'absolute',
    right: 10,
    justifyContent: 'center',
    padding: 5
 
  }
});

const styles = StyleSheet.create(

{

MainContainer:

{

flex: 1,

justifyContent: 'center',

paddingHorizontal: 20,

paddingTop: (Platform.OS) === 'ios' ? 20 :

SnackBarContainterView:

{

position: 'absolute',

backgroundColor: '#009688',

flexDirection: 'row',

alignItems: 'center',

left: ,

bottom: ,

right: ,

height: 60,

paddingLeft: 10,

paddingRight: 55

SnackBarInsideTextStyle:

{

color: '#fff',

fontSize: 18

SnackBarUndoTextStyle:{

color: '#FFEB3B',

fontSize: 18,

position: 'absolute',

right: 10,

justifyContent: 'center',

padding: 5

}

});

9.کد کامل برنامه در فایل App.js

import React, { Component } from 'react';
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/%d9%86%d9%85%d8%a7%db%8c%d8%b4-error-message-%d8%af%d8%b1-%d8%b5%d9%88%d8%b1%d8%aa-%d8%ae%d8%a7%d9%84%db%8c-%d8%a8%d9%88%d8%af%d9%86-flatlist/" 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/Display-the-Error-Message-if-FlatList-is-empty-300x162.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">نمایش Error Message در صورت خالی بودن FlatList</div></div></div><div class="ctaButton"></div></div></a></div> 
import { AppRegistry, Animated, View, Platform, Button, Image, StyleSheet, Text } from 'react-native';
 
class MaterialDesignSnackBar extends Component
{
   constructor()
   {
      super();
 
      this.animatedValue = new Animated.Value(60);
 
      this.ShowSnackBar = false;
 
      this.HideSnackBar = true;
 
      this.state = { SnackBarInsideMsgHolder: '' };
   }
 
  ShowSnackBarFunction(SnackBarInsideMsgHolder="Default SnackBar Message...", duration=3000)
  {
    if( this.ShowSnackBar === false )
    {
      this.setState({ SnackBarInsideMsgHolder: SnackBarInsideMsgHolder });
 
      this.ShowSnackBar = true;
 
      Animated.timing
      (
          this.animatedValue,
          { 
              toValue: 0,
              duration: 350
          }
      ).start(this.hide(duration));
    }     
  }
 
    hide = (duration) =>
    {
      this.timerID = setTimeout(() =>
      {
        if(this.HideSnackBar === true)
        {
            this.HideSnackBar = false;
 
            Animated.timing
            (
              this.animatedValue,
              { 
                toValue: 60,
                duration: 350
              }
            ).start(() =>
            {
              this.HideSnackBar = true;
              this.ShowSnackBar = false;
 
              clearTimeout(this.timerID);
            })
        }
      }, duration); 
    }
 
    SnackBarCloseFunction = () =>
    {
      if(this.HideSnackBar === true)
      {
          this.HideSnackBar = false;
 
          clearTimeout(this.timerID);
 
          Animated.timing
          (
              this.animatedValue,
              { 
                toValue: 60,
                duration: 350
              }
          ).start(() =>
          {
              this.ShowSnackBar = false;
              this.HideSnackBar = true;
          });
      }
    }
 
    render()
    {
      return(
 
         <Animated.View style = {[{ transform: [{ translateY: this.animatedValue }]}, styles.SnackBarContainterView ]}>
 
 
            <Text numberOfLines = { 1 } style = { styles.SnackBarInsideTextStyle }>{ this.state.SnackBarInsideMsgHolder }</Text>
 
 
            <Text style = { styles.SnackBarUndoTextStyle} onPress = { this.SnackBarCloseFunction } > UNDO </Text>
 
 
         </Animated.View>
         
      );
    }
}
 
class Project extends Component
{
   constructor()
   {
      super();
   }
 
   DisplayMaterialDesignSnackBar = () =>
   {
      this.refs.ReactNativeCodeSnackBar.ShowSnackBarFunction("reactapp.ir");
   }
 
   render()
   {
      return(
         <View style = { styles.MainContainer }>
 
            <Button onPress = { this.DisplayMaterialDesignSnackBar } title=" Show Material Design SnackBar " >  </Button>
 
            <MaterialDesignSnackBar ref = "ReactNativeCodeSnackBar"/>
 
         </View>
      );
   }
}
 
const styles = StyleSheet.create(
{
  MainContainer:
  {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 20,
    paddingTop: (Platform.OS) === 'ios' ? 20 : 0
  },
 
  SnackBarContainterView:
  {
    position: 'absolute',
    backgroundColor: '#009688', 
    flexDirection: 'row',
    alignItems: 'center',
    left: 0,
    bottom: 0,
    right: 0,
    height: 60,
    paddingLeft: 10,
    paddingRight: 55
  },
 
  SnackBarInsideTextStyle:
  {
    color: '#fff',
    fontSize: 18
  },
 
  SnackBarUndoTextStyle:{
 
    color: '#FFEB3B',
    fontSize: 18,
    position: 'absolute',
    right: 10,
    justifyContent: 'center',
    padding: 5
 
  }
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

import React, { Component } from 'react';

import { AppRegistry, Animated, View, Platform, Button, Image, StyleSheet, Text } from 'react-native';

class MaterialDesignSnackBar extends Component

{

constructor()

{

super();

this.animatedValue = new Animated.Value(60);

this.ShowSnackBar = false;

this.HideSnackBar = true;

this.state = { SnackBarInsideMsgHolder: '' };

}

ShowSnackBarFunction(SnackBarInsideMsgHolder="Default SnackBar Message...", duration=3000)

{

if( this.ShowSnackBar === false )

{

this.setState({ SnackBarInsideMsgHolder: SnackBarInsideMsgHolder });

this.ShowSnackBar = true;

Animated.timing

(

this.animatedValue,

{

toValue: ,

duration: 350

}

).start(this.hide(duration));

}

hide = (duration) =>

{

this.timerID = setTimeout(() =>

{

if(this.HideSnackBar === true)

{

this.HideSnackBar = false;

Animated.timing

(

this.animatedValue,

{

toValue: 60,

duration: 350

}

).start(() =>

{

this.HideSnackBar = true;

this.ShowSnackBar = false;

clearTimeout(this.timerID);

})

}

}, duration);

}

SnackBarCloseFunction = () =>

{

if(this.HideSnackBar === true)

{

this.HideSnackBar = false;

clearTimeout(this.timerID);

Animated.timing

(

this.animatedValue,

{

toValue: 60,

duration: 350

}

).start(() =>

{

this.ShowSnackBar = false;

this.HideSnackBar = true;

});

}

render()

{

return(

<Animated.View style = {[{ transform: [{ translateY: this.animatedValue }]}, styles.SnackBarContainterView ]}>

<Text numberOfLines = { 1 } style = { styles.SnackBarInsideTextStyle }>{ this.state.SnackBarInsideMsgHolder }</Text>

</Animated.View>

);

}

class Project extends Component

{

constructor()

{

super();

}

DisplayMaterialDesignSnackBar = () =>

{

this.refs.ReactNativeCodeSnackBar.ShowSnackBarFunction("reactapp.ir");

}

render()

{

return(

</View>

);

}

const styles = StyleSheet.create(

{

MainContainer:

{

flex: 1,

justifyContent: 'center',

paddingHorizontal: 20,

paddingTop: (Platform.OS) === 'ios' ? 20 :

SnackBarContainterView:

{

position: 'absolute',

backgroundColor: '#009688',

flexDirection: 'row',

alignItems: 'center',

left: ,

bottom: ,

right: ,

height: 60,

paddingLeft: 10,

paddingRight: 55

SnackBarInsideTextStyle:

{

color: '#fff',

fontSize: 18

SnackBarUndoTextStyle:{

color: '#FFEB3B',

fontSize: 18,

position: 'absolute',

right: 10,

justifyContent: 'center',

padding: 5

}

});

طراحی Material SnackBar در React Native

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

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

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

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

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

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

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

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